[ILM] Policy phases redesign (elastic#88671) (elastic#89447)

* Phases redesign * Title and name field layout * Active highlight wip * Copy comments * Updated data allocation dropdown * Min age error message * Fixed tests * Fixed edit policy integration tests * Fixed more tests * Cleaned up test files * Use hotProperty instead of a string * Clean up in phase component * Fixed i18n files * Updated optional fields * Updated aria attributes after running axe tests * Added review suggestions * Reversed data allocation field changes * Fixed type error * Reversed on/off label and prepend input label * Deleted property consts from phases components * Removed not needed i18n consts and added i18n where missing * Fixed merge conflicts with master Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
pgayvallet · Jan 28, 2021 · ab1699d · ab1699d
1 parent 2f06b32
commit ab1699d
Show file tree

Hide file tree

Showing 35 changed files with 1,030 additions and 1,248 deletions.
diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/app/app.test.ts b/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/app/app.test.ts
@@ -21,6 +21,9 @@ const PERCENT_SIGN_NAME = 'test%';
 const PERCENT_SIGN_WITH_OTHER_CHARS_NAME = 'test%#';
 const PERCENT_SIGN_25_SEQUENCE = 'test%25';
 
+const createPolicyTitle = 'Create Policy';
+const editPolicyTitle = 'Edit Policy';
+
 window.scrollTo = jest.fn();
 
 jest.mock('@elastic/eui', () => {
@@ -52,7 +55,7 @@ describe('<App />', () => {
       await actions.clickCreatePolicyButton();
       component.update();
 
-      expect(testBed.find('policyTitle').text()).toBe(`Create an index lifecycle policy`);
+      expect(testBed.find('policyTitle').text()).toBe(createPolicyTitle);
       expect(testBed.find('policyNameField').props().value).toBe('');
     });
 
@@ -68,7 +71,7 @@ describe('<App />', () => {
       await actions.clickCreatePolicyButton();
       component.update();
 
-      expect(testBed.find('policyTitle').text()).toBe(`Create an index lifecycle policy`);
+      expect(testBed.find('policyTitle').text()).toBe(createPolicyTitle);
       expect(testBed.find('policyNameField').props().value).toBe('');
     });
   });
@@ -89,9 +92,7 @@ describe('<App />', () => {
       await actions.clickPolicyNameLink();
       component.update();
 
-      expect(testBed.find('policyTitle').text()).toBe(
-        `Edit index lifecycle policy ${SPECIAL_CHARS_NAME}`
-      );
+      expect(testBed.find('policyTitle').text()).toBe(`${editPolicyTitle} ${SPECIAL_CHARS_NAME}`);
     });
 
     test('loading edit policy page url works', async () => {
@@ -102,9 +103,7 @@ describe('<App />', () => {
       const { component } = testBed;
       component.update();
 
-      expect(testBed.find('policyTitle').text()).toBe(
-        `Edit index lifecycle policy ${SPECIAL_CHARS_NAME}`
-      );
+      expect(testBed.find('policyTitle').text()).toBe(`${editPolicyTitle} ${SPECIAL_CHARS_NAME}`);
     });
 
     // using double encoding to counteract react-router's v5 internal decodeURI call
@@ -117,9 +116,7 @@ describe('<App />', () => {
       const { component } = testBed;
       component.update();
 
-      expect(testBed.find('policyTitle').text()).toBe(
-        `Edit index lifecycle policy ${SPECIAL_CHARS_NAME}`
-      );
+      expect(testBed.find('policyTitle').text()).toBe(`${editPolicyTitle} ${SPECIAL_CHARS_NAME}`);
     });
   });
 
@@ -136,9 +133,7 @@ describe('<App />', () => {
       const { component } = testBed;
       component.update();
 
-      expect(testBed.find('policyTitle').text()).toBe(
-        `Edit index lifecycle policy ${PERCENT_SIGN_NAME}`
-      );
+      expect(testBed.find('policyTitle').text()).toBe(`${editPolicyTitle} ${PERCENT_SIGN_NAME}`);
     });
 
     test('loading edit policy page url with double encoding works', async () => {
@@ -149,9 +144,7 @@ describe('<App />', () => {
       const { component } = testBed;
       component.update();
 
-      expect(testBed.find('policyTitle').text()).toBe(
-        `Edit index lifecycle policy ${PERCENT_SIGN_NAME}`
-      );
+      expect(testBed.find('policyTitle').text()).toBe(`${editPolicyTitle} ${PERCENT_SIGN_NAME}`);
     });
   });
 
@@ -174,7 +167,7 @@ describe('<App />', () => {
       component.update();
 
       expect(testBed.find('policyTitle').text()).toBe(
-        `Edit index lifecycle policy ${PERCENT_SIGN_WITH_OTHER_CHARS_NAME}`
+        `${editPolicyTitle} ${PERCENT_SIGN_WITH_OTHER_CHARS_NAME}`
       );
     });
 
@@ -188,7 +181,7 @@ describe('<App />', () => {
 
       // known issue https://github.com/elastic/kibana/issues/82440
       expect(testBed.find('policyTitle').text()).not.toBe(
-        `Edit index lifecycle policy ${PERCENT_SIGN_WITH_OTHER_CHARS_NAME}`
+        `${editPolicyTitle} ${PERCENT_SIGN_WITH_OTHER_CHARS_NAME}`
       );
     });
 
@@ -203,7 +196,7 @@ describe('<App />', () => {
       component.update();
 
       expect(testBed.find('policyTitle').text()).toBe(
-        `Edit index lifecycle policy ${PERCENT_SIGN_WITH_OTHER_CHARS_NAME}`
+        `${editPolicyTitle} ${PERCENT_SIGN_WITH_OTHER_CHARS_NAME}`
       );
     });
   });
@@ -225,7 +218,7 @@ describe('<App />', () => {
       component.update();
 
       expect(testBed.find('policyTitle').text()).toBe(
-        `Edit index lifecycle policy ${PERCENT_SIGN_25_SEQUENCE}`
+        `${editPolicyTitle} ${PERCENT_SIGN_25_SEQUENCE}`
       );
     });
 
@@ -239,7 +232,7 @@ describe('<App />', () => {
 
       // known issue https://github.com/elastic/kibana/issues/82440
       expect(testBed.find('policyTitle').text()).not.toBe(
-        `Edit index lifecycle policy ${PERCENT_SIGN_25_SEQUENCE}`
+        `${editPolicyTitle} ${PERCENT_SIGN_25_SEQUENCE}`
       );
     });
 
@@ -254,7 +247,7 @@ describe('<App />', () => {
       component.update();
 
       expect(testBed.find('policyTitle').text()).toBe(
-        `Edit index lifecycle policy ${PERCENT_SIGN_25_SEQUENCE}`
+        `${editPolicyTitle} ${PERCENT_SIGN_25_SEQUENCE}`
       );
     });
   });

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
@@ -89,6 +89,13 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
     component.update();
   };
 
+  const createFormCheckboxAction = (dataTestSubject: string) => async (checked: boolean) => {
+    await act(async () => {
+      form.selectCheckBox(dataTestSubject, checked);
+    });
+    component.update();
+  };
+
   function createFormSetValueAction<V extends string = string>(dataTestSubject: string) {
     return async (value: V) => {
       await act(async () => {
@@ -146,17 +153,21 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
       forceMergeFieldExists: () => exists(toggleSelector),
       toggleForceMerge: createFormToggleAction(toggleSelector),
       setForcemergeSegmentsCount: createFormSetValueAction(`${phase}-selectedForceMergeSegments`),
-      setBestCompression: createFormToggleAction(`${phase}-bestCompression`),
+      setBestCompression: createFormCheckboxAction(`${phase}-bestCompression`),
     };
   };
 
-  const setIndexPriority = (phase: Phases) =>
-    createFormSetValueAction(`${phase}-phaseIndexPriority`);
+  const createIndexPriorityActions = (phase: Phases) => {
+    const toggleSelector = `${phase}-indexPrioritySwitch`;
+    return {
+      indexPriorityExists: () => exists(toggleSelector),
+      toggleIndexPriority: createFormToggleAction(toggleSelector),
+      setIndexPriority: createFormSetValueAction(`${phase}-indexPriority`),
+    };
+  };
 
   const enable = (phase: Phases) => createFormToggleAction(`enablePhaseSwitch-${phase}`);
 
-  const warmPhaseOnRollover = createFormToggleAction(`warm-warmPhaseOnRollover`);
-
   const setMinAgeValue = (phase: Phases) => createFormSetValueAction(`${phase}-selectedMinimumAge`);
 
   const setMinAgeUnits = (phase: Phases) =>
@@ -190,13 +201,15 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
     await createFormSetValueAction(`${phase}-selectedReplicaCount`)(value);
   };
 
-  const setShrink = (phase: Phases) => async (value: string) => {
-    await createFormToggleAction(`${phase}-shrinkSwitch`)(true);
-    await createFormSetValueAction(`${phase}-selectedPrimaryShardCount`)(value);
+  const createShrinkActions = (phase: Phases) => {
+    const toggleSelector = `${phase}-shrinkSwitch`;
+    return {
+      shrinkExists: () => exists(toggleSelector),
+      toggleShrink: createFormToggleAction(toggleSelector),
+      setShrink: createFormSetValueAction(`${phase}-primaryShardCount`),
+    };
   };
 
-  const shrinkExists = (phase: Phases) => () => exists(`${phase}-shrinkSwitch`);
-
   const setFreeze = createFormToggleAction('freezeSwitch');
   const freezeExists = () => exists('freezeSwitch');
 
@@ -250,25 +263,22 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
         toggleRollover,
         toggleDefaultRollover,
         ...createForceMergeActions('hot'),
-        setIndexPriority: setIndexPriority('hot'),
-        setShrink: setShrink('hot'),
-        shrinkExists: shrinkExists('hot'),
+        ...createIndexPriorityActions('hot'),
+        ...createShrinkActions('hot'),
         setReadonly: setReadonly('hot'),
         ...createSearchableSnapshotActions('hot'),
       },
       warm: {
         enable: enable('warm'),
-        warmPhaseOnRollover,
         setMinAgeValue: setMinAgeValue('warm'),
         setMinAgeUnits: setMinAgeUnits('warm'),
         setDataAllocation: setDataAllocation('warm'),
         setSelectedNodeAttribute: setSelectedNodeAttribute('warm'),
         setReplicas: setReplicas('warm'),
-        setShrink: setShrink('warm'),
-        shrinkExists: shrinkExists('warm'),
+        ...createShrinkActions('warm'),
         ...createForceMergeActions('warm'),
         setReadonly: setReadonly('warm'),
-        setIndexPriority: setIndexPriority('warm'),
+        ...createIndexPriorityActions('warm'),
       },
       cold: {
         enable: enable('cold'),
@@ -279,7 +289,7 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
         setReplicas: setReplicas('cold'),
         setFreeze,
         freezeExists,
-        setIndexPriority: setIndexPriority('cold'),
+        ...createIndexPriorityActions('cold'),
         ...createSearchableSnapshotActions('cold'),
       },
       delete: {

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
@@ -76,9 +76,6 @@ describe('<EditPolicy />', () => {
                 max_size: '50gb',
                 unknown_setting: 123, // Made up setting that should stay preserved
               },
-              set_priority: {
-                priority: 100,
-              },
             },
             min_age: '0ms',
           },
@@ -126,8 +123,10 @@ describe('<EditPolicy />', () => {
         await actions.hot.toggleForceMerge(true);
         await actions.hot.setForcemergeSegmentsCount('123');
         await actions.hot.setBestCompression(true);
+        await actions.hot.toggleShrink(true);
         await actions.hot.setShrink('2');
         await actions.hot.setReadonly(true);
+        await actions.hot.toggleIndexPriority(true);
         await actions.hot.setIndexPriority('123');
 
         await actions.savePolicy();
@@ -186,13 +185,7 @@ describe('<EditPolicy />', () => {
         const hotActions = policy.phases.hot.actions;
         const rolloverAction = hotActions.rollover;
         expect(rolloverAction).toBe(undefined);
-        expect(hotActions).toMatchInlineSnapshot(`
-          Object {
-            "set_priority": Object {
-              "priority": 100,
-            },
-          }
-        `);
+        expect(hotActions).toMatchInlineSnapshot(`Object {}`);
       });
 
       test('enabling searchable snapshot should hide force merge, freeze and shrink in subsequent phases', async () => {
@@ -260,6 +253,7 @@ describe('<EditPolicy />', () => {
                 "priority": 50,
               },
             },
+            "min_age": "0ms",
           }
         `);
       });
@@ -270,6 +264,7 @@ describe('<EditPolicy />', () => {
         await actions.warm.setDataAllocation('node_attrs');
         await actions.warm.setSelectedNodeAttribute('test:123');
         await actions.warm.setReplicas('123');
+        await actions.warm.toggleShrink(true);
         await actions.warm.setShrink('123');
         await actions.warm.toggleForceMerge(true);
         await actions.warm.setForcemergeSegmentsCount('123');
@@ -290,9 +285,6 @@ describe('<EditPolicy />', () => {
                     "max_age": "30d",
                     "max_size": "50gb",
                   },
-                  "set_priority": Object {
-                    "priority": 100,
-                  },
                 },
                 "min_age": "0ms",
               },
@@ -316,24 +308,12 @@ describe('<EditPolicy />', () => {
                     "number_of_shards": 123,
                   },
                 },
+                "min_age": "0ms",
               },
             },
           }
         `);
       });
-
-      test('setting warm phase on rollover to "false"', async () => {
-        const { actions } = testBed;
-        await actions.warm.enable(true);
-        await actions.warm.warmPhaseOnRollover(false);
-        await actions.warm.setMinAgeValue('123');
-        await actions.warm.setMinAgeUnits('d');
-        await actions.savePolicy();
-        const latestRequest = server.requests[server.requests.length - 1];
-        const warmPhaseMinAge = JSON.parse(JSON.parse(latestRequest.requestBody).body).phases.warm
-          .min_age;
-        expect(warmPhaseMinAge).toBe('123d');
-      });
     });
 
     describe('policy with include and exclude', () => {
@@ -458,9 +438,6 @@ describe('<EditPolicy />', () => {
                     "max_age": "30d",
                     "max_size": "50gb",
                   },
-                  "set_priority": Object {
-                    "priority": 100,
-                  },
                 },
                 "min_age": "0ms",
               },
@@ -662,9 +639,6 @@ describe('<EditPolicy />', () => {
             "allocate": Object {
               "number_of_replicas": 123,
             },
-            "set_priority": Object {
-              "priority": 50,
-            },
           }
         `);
       });