[ILM] TS conversion of Edit policy page (#75148)

* [ILM] TS conversion of Edit policy page * [ILM] Deleted some constants * [ILM] Fixed imports * [ILM] Fixed imports * [ILM] Clean up * [ILM] Clean up * [ILM] Fixed ui_metric jest test * [ILM] Fixed ui_metric jest test * [ILM] Fix review suggestions Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Aug 25, 2020 · c634208 · c634208
1 parent 9cafade
commit c634208
Show file tree

Hide file tree

Showing 54 changed files with 1,996 additions and 1,967 deletions.
diff --git a/...k/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/constants.ts b/...k/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/constants.ts
@@ -4,21 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { PolicyFromES } from '../../../public/application/services/policies/types';
+
 export const POLICY_NAME = 'my_policy';
 export const SNAPSHOT_POLICY_NAME = 'my_snapshot_policy';
 export const NEW_SNAPSHOT_POLICY_NAME = 'my_new_snapshot_policy';
 
-export const DELETE_PHASE_POLICY = {
+export const DELETE_PHASE_POLICY: PolicyFromES = {
   version: 1,
-  modified_date: Date.now(),
+  modified_date: Date.now().toString(),
   policy: {
     phases: {
       hot: {
         min_age: '0ms',
         actions: {
-          set_priority: {
-            priority: null,
-          },
           rollover: {
             max_size: '50gb',
           },
@@ -36,6 +35,7 @@ export const DELETE_PHASE_POLICY = {
         },
       },
     },
+    name: POLICY_NAME,
   },
   name: POLICY_NAME,
 };
diff --git a/...ndex_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.helpers.tsx b/...ndex_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.helpers.tsx
@@ -13,7 +13,6 @@ import { POLICY_NAME } from './constants';
 import { TestSubjects } from '../helpers';
 
 import { EditPolicy } from '../../../public/application/sections/edit_policy';
-import { indexLifecycleManagementStore } from '../../../public/application/store';
 
 jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
@@ -35,7 +34,6 @@ jest.mock('@elastic/eui', () => {
 });
 
 const testBedConfig: TestBedConfig = {
-  store: () => indexLifecycleManagementStore(),
   memoryRouter: {
     initialEntries: [`/policies/edit/${POLICY_NAME}`],
     componentRoutePath: `/policies/edit/:policyName`,

diff --git a/...ns/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.test.ts b/...ns/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.test.ts
@@ -40,8 +40,8 @@ describe('<EditPolicy />', () => {
     test('wait for snapshot policy field should correctly display snapshot policy name', () => {
       expect(testBed.find('snapshotPolicyCombobox').prop('data-currentvalue')).toEqual([
         {
-          label: DELETE_PHASE_POLICY.policy.phases.delete.actions.wait_for_snapshot.policy,
-          value: DELETE_PHASE_POLICY.policy.phases.delete.actions.wait_for_snapshot.policy,
+          label: DELETE_PHASE_POLICY.policy.phases.delete?.actions.wait_for_snapshot?.policy,
+          value: DELETE_PHASE_POLICY.policy.phases.delete?.actions.wait_for_snapshot?.policy,
         },
       ]);
     });
@@ -59,7 +59,7 @@ describe('<EditPolicy />', () => {
           delete: {
             ...DELETE_PHASE_POLICY.policy.phases.delete,
             actions: {
-              ...DELETE_PHASE_POLICY.policy.phases.delete.actions,
+              ...DELETE_PHASE_POLICY.policy.phases.delete?.actions,
               wait_for_snapshot: {
                 policy: NEW_SNAPSHOT_POLICY_NAME,
               },
@@ -96,7 +96,7 @@ describe('<EditPolicy />', () => {
           delete: {
             ...DELETE_PHASE_POLICY.policy.phases.delete,
             actions: {
-              ...DELETE_PHASE_POLICY.policy.phases.delete.actions,
+              ...DELETE_PHASE_POLICY.policy.phases.delete?.actions,
             },
           },
         },

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
@@ -7,7 +7,6 @@
 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';
@@ -21,9 +20,7 @@ import {
 import { usageCollectionPluginMock } from '../../../../../src/plugins/usage_collection/public/mocks';
 
 import { mountWithIntl } from '../../../../test_utils/enzyme_helpers';
-import { fetchedPolicies } from '../../public/application/store/actions';
-import { indexLifecycleManagementStore } from '../../public/application/store';
-import { EditPolicy } from '../../public/application/sections/edit_policy';
+import { EditPolicy } from '../../public/application/sections/edit_policy/edit_policy';
 import { init as initHttp } from '../../public/application/services/http';
 import { init as initUiMetric } from '../../public/application/services/ui_metric';
 import { init as initNotification } from '../../public/application/services/notification';
@@ -40,7 +37,7 @@ import {
   policyNameMustBeDifferentErrorMessage,
   policyNameAlreadyUsedErrorMessage,
   maximumDocumentsRequiredMessage,
-} from '../../public/application/store/selectors';
+} from '../../public/application/services/policies/policy_validation';
 
 initHttp(axios.create({ adapter: axiosXhrAdapter }));
 initUiMetric(usageCollectionPluginMock.createSetupContract());
@@ -51,7 +48,6 @@ initNotification(
 
 let server;
 let httpRequestsMockHelpers;
-let store;
 const policy = {
   phases: {
     hot: {
@@ -128,13 +124,14 @@ const save = (rendered) => {
 };
 describe('edit policy', () => {
   beforeEach(() => {
-    store = indexLifecycleManagementStore();
     component = (
-      <Provider store={store}>
-        <EditPolicy history={{ push: () => {} }} getUrlForApp={() => {}} />
-      </Provider>
+      <EditPolicy
+        history={{ push: () => {} }}
+        getUrlForApp={() => {}}
+        policies={policies}
+        policyName={''}
+      />
     );
-    store.dispatch(fetchedPolicies(policies));
     ({ server, httpRequestsMockHelpers } = initHttpRequests());
 
     httpRequestsMockHelpers.setPoliciesResponse(policies);
@@ -162,9 +159,12 @@ describe('edit policy', () => {
     });
     test('should show error when trying to save as new policy but using the same name', () => {
       component = (
-        <Provider store={store}>
-          <EditPolicy match={{ params: { policyName: 'testy0' } }} getUrlForApp={() => {}} />
-        </Provider>
+        <EditPolicy
+          policyName={'testy0'}
+          policies={policies}
+          getUrlForApp={() => {}}
+          history={{ push: () => {} }}
+        />
       );
       const rendered = mountWithIntl(component);
       findTestSubject(rendered, 'saveAsNewSwitch').simulate('click');

diff --git a/x-pack/plugins/index_lifecycle_management/public/application/app.tsx b/x-pack/plugins/index_lifecycle_management/public/application/app.tsx
@@ -9,7 +9,7 @@ import { Router, Switch, Route, Redirect } from 'react-router-dom';
 import { ScopedHistory, ApplicationStart } from 'kibana/public';
 import { METRIC_TYPE } from '@kbn/analytics';
 
-import { UIM_APP_LOAD } from './constants';
+import { UIM_APP_LOAD } from './constants/ui_metric';
 import { EditPolicy } from './sections/edit_policy';
 import { PolicyTable } from './sections/policy_table';
 import { trackUiMetric } from './services/ui_metric';

diff --git a/x-pack/plugins/index_lifecycle_management/public/application/constants/index.ts b/x-pack/plugins/index_lifecycle_management/public/application/constants/index.ts
@@ -4,102 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+export * from './policy';
 export * from './ui_metric';
-
-export const SET_PHASE_DATA: string = 'SET_PHASE_DATA';
-export const SET_SELECTED_NODE_ATTRS: string = 'SET_SELECTED_NODE_ATTRS';
-export const PHASE_HOT: string = 'hot';
-export const PHASE_WARM: string = 'warm';
-export const PHASE_COLD: string = 'cold';
-export const PHASE_DELETE: string = 'delete';
-
-export const PHASE_ENABLED: string = 'phaseEnabled';
-
-export const PHASE_ROLLOVER_ENABLED: string = 'rolloverEnabled';
-export const WARM_PHASE_ON_ROLLOVER: string = 'warmPhaseOnRollover';
-export const PHASE_ROLLOVER_ALIAS: string = 'selectedAlias';
-export const PHASE_ROLLOVER_MAX_AGE: string = 'selectedMaxAge';
-export const PHASE_ROLLOVER_MAX_AGE_UNITS: string = 'selectedMaxAgeUnits';
-export const PHASE_ROLLOVER_MAX_SIZE_STORED: string = 'selectedMaxSizeStored';
-export const PHASE_ROLLOVER_MAX_DOCUMENTS: string = 'selectedMaxDocuments';
-export const PHASE_ROLLOVER_MAX_SIZE_STORED_UNITS: string = 'selectedMaxSizeStoredUnits';
-export const PHASE_ROLLOVER_MINIMUM_AGE: string = 'selectedMinimumAge';
-export const PHASE_ROLLOVER_MINIMUM_AGE_UNITS: string = 'selectedMinimumAgeUnits';
-
-export const PHASE_FORCE_MERGE_SEGMENTS: string = 'selectedForceMergeSegments';
-export const PHASE_FORCE_MERGE_ENABLED: string = 'forceMergeEnabled';
-export const PHASE_FREEZE_ENABLED: string = 'freezeEnabled';
-
-export const PHASE_SHRINK_ENABLED: string = 'shrinkEnabled';
-
-export const PHASE_NODE_ATTRS: string = 'selectedNodeAttrs';
-export const PHASE_PRIMARY_SHARD_COUNT: string = 'selectedPrimaryShardCount';
-export const PHASE_REPLICA_COUNT: string = 'selectedReplicaCount';
-export const PHASE_INDEX_PRIORITY: string = 'phaseIndexPriority';
-
-export const PHASE_WAIT_FOR_SNAPSHOT_POLICY = 'waitForSnapshotPolicy';
-
-export const PHASE_ATTRIBUTES_THAT_ARE_NUMBERS_VALIDATE: string[] = [
-  PHASE_ROLLOVER_MINIMUM_AGE,
-  PHASE_FORCE_MERGE_SEGMENTS,
-  PHASE_PRIMARY_SHARD_COUNT,
-  PHASE_REPLICA_COUNT,
-  PHASE_INDEX_PRIORITY,
-];
-export const PHASE_ATTRIBUTES_THAT_ARE_NUMBERS: string[] = [
-  ...PHASE_ATTRIBUTES_THAT_ARE_NUMBERS_VALIDATE,
-  PHASE_ROLLOVER_MAX_AGE,
-  PHASE_ROLLOVER_MAX_SIZE_STORED,
-  PHASE_ROLLOVER_MAX_DOCUMENTS,
-];
-
-export const STRUCTURE_INDEX_TEMPLATE: string = 'indexTemplate';
-export const STRUCTURE_TEMPLATE_SELECTION: string = 'templateSelection';
-export const STRUCTURE_TEMPLATE_NAME: string = 'templateName';
-export const STRUCTURE_CONFIGURATION: string = 'configuration';
-export const STRUCTURE_NODE_ATTRS: string = 'node_attrs';
-export const STRUCTURE_PRIMARY_NODES: string = 'primary_nodes';
-export const STRUCTURE_REPLICAS: string = 'replicas';
-
-export const STRUCTURE_POLICY_CONFIGURATION: string = 'policyConfiguration';
-
-export const STRUCTURE_REVIEW: string = 'review';
-export const STRUCTURE_POLICY_NAME: string = 'policyName';
-export const STRUCTURE_INDEX_NAME: string = 'indexName';
-export const STRUCTURE_ALIAS_NAME: string = 'aliasName';
-
-export const ERROR_STRUCTURE: any = {
-  [PHASE_HOT]: {
-    [PHASE_ROLLOVER_ALIAS]: [],
-    [PHASE_ROLLOVER_MAX_AGE]: [],
-    [PHASE_ROLLOVER_MAX_AGE_UNITS]: [],
-    [PHASE_ROLLOVER_MAX_SIZE_STORED]: [],
-    [PHASE_ROLLOVER_MAX_DOCUMENTS]: [],
-    [PHASE_ROLLOVER_MAX_SIZE_STORED_UNITS]: [],
-    [PHASE_INDEX_PRIORITY]: [],
-  },
-  [PHASE_WARM]: {
-    [PHASE_ROLLOVER_ALIAS]: [],
-    [PHASE_ROLLOVER_MINIMUM_AGE]: [],
-    [PHASE_ROLLOVER_MINIMUM_AGE_UNITS]: [],
-    [PHASE_NODE_ATTRS]: [],
-    [PHASE_PRIMARY_SHARD_COUNT]: [],
-    [PHASE_REPLICA_COUNT]: [],
-    [PHASE_FORCE_MERGE_SEGMENTS]: [],
-    [PHASE_INDEX_PRIORITY]: [],
-  },
-  [PHASE_COLD]: {
-    [PHASE_ROLLOVER_ALIAS]: [],
-    [PHASE_ROLLOVER_MINIMUM_AGE]: [],
-    [PHASE_ROLLOVER_MINIMUM_AGE_UNITS]: [],
-    [PHASE_NODE_ATTRS]: [],
-    [PHASE_REPLICA_COUNT]: [],
-    [PHASE_INDEX_PRIORITY]: [],
-  },
-  [PHASE_DELETE]: {
-    [PHASE_ROLLOVER_ALIAS]: [],
-    [PHASE_ROLLOVER_MINIMUM_AGE]: [],
-    [PHASE_ROLLOVER_MINIMUM_AGE_UNITS]: [],
-  },
-  [STRUCTURE_POLICY_NAME]: [],
-};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/constants/policy.ts b/x-pack/plugins/index_lifecycle_management/public/application/constants/policy.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 {
+  SerializedPhase,
+  ColdPhase,
+  DeletePhase,
+  HotPhase,
+  WarmPhase,
+} from '../services/policies/types';
+
+export const defaultNewHotPhase: HotPhase = {
+  phaseEnabled: true,
+  rolloverEnabled: true,
+  selectedMaxAge: '30',
+  selectedMaxAgeUnits: 'd',
+  selectedMaxSizeStored: '50',
+  selectedMaxSizeStoredUnits: 'gb',
+  phaseIndexPriority: '100',
+  selectedMaxDocuments: '',
+};
+
+export const defaultNewWarmPhase: WarmPhase = {
+  phaseEnabled: false,
+  forceMergeEnabled: false,
+  selectedForceMergeSegments: '',
+  selectedMinimumAge: '0',
+  selectedMinimumAgeUnits: 'd',
+  selectedNodeAttrs: '',
+  shrinkEnabled: false,
+  selectedPrimaryShardCount: '',
+  selectedReplicaCount: '',
+  warmPhaseOnRollover: true,
+  phaseIndexPriority: '50',
+};
+
+export const defaultNewColdPhase: ColdPhase = {
+  phaseEnabled: false,
+  selectedMinimumAge: '0',
+  selectedMinimumAgeUnits: 'd',
+  selectedNodeAttrs: '',
+  selectedReplicaCount: '',
+  freezeEnabled: false,
+  phaseIndexPriority: '0',
+};
+
+export const defaultNewDeletePhase: DeletePhase = {
+  phaseEnabled: false,
+  selectedMinimumAge: '0',
+  selectedMinimumAgeUnits: 'd',
+  waitForSnapshotPolicy: '',
+};
+
+export const serializedPhaseInitialization: SerializedPhase = {
+  min_age: '0ms',
+  actions: {},
+};
diff --git a/...x_lifecycle_management/public/application/sections/edit_policy/components/form_errors.tsx b/...x_lifecycle_management/public/application/sections/edit_policy/components/form_errors.tsx
@@ -8,28 +8,22 @@ import React, { cloneElement, Children, Fragment, ReactElement } from 'react';
 import { EuiFormRow, EuiFormRowProps } from '@elastic/eui';
 
 type Props = EuiFormRowProps & {
-  errorKey: string;
   isShowingErrors: boolean;
-  errors: Record<string, string[]>;
+  errors?: string[];
 };
 
 export const ErrableFormRow: React.FunctionComponent<Props> = ({
-  errorKey,
   isShowingErrors,
   errors,
   children,
   ...rest
 }) => {
   return (
-    <EuiFormRow
-      isInvalid={isShowingErrors && errors[errorKey].length > 0}
-      error={errors[errorKey]}
-      {...rest}
-    >
+    <EuiFormRow isInvalid={errors && isShowingErrors && errors.length > 0} error={errors} {...rest}>
       <Fragment>
         {Children.map(children, (child) =>
           cloneElement(child as ReactElement, {
-            isInvalid: isShowingErrors && errors[errorKey].length > 0,
+            isInvalid: errors && isShowingErrors && errors.length > 0,
           })
         )}
       </Fragment>