[ILM] Delete phase redesign (rework) (elastic#90291)

* Phases redesign * Fixed scss file * Fixed errors * Added changes for phase blocks * Added styles adjustments Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
yuliacech · Feb 9, 2021 · 5badc31 · 5badc31
1 parent 735d9a9
commit 5badc31
Show file tree

Hide file tree

Showing 34 changed files with 672 additions and 321 deletions.
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
@@ -248,6 +248,27 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
     };
   };
 
+  const createToggleDeletePhaseActions = () => {
+    const enablePhase = async () => {
+      await act(async () => {
+        find('enableDeletePhaseButton').simulate('click');
+      });
+      component.update();
+    };
+
+    const disablePhase = async () => {
+      await act(async () => {
+        find('disableDeletePhaseButton').simulate('click');
+      });
+      component.update();
+    };
+
+    return {
+      enablePhase,
+      disablePhase,
+    };
+  };
+
   return {
     ...testBed,
     actions: {
@@ -303,7 +324,7 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
         ...createSearchableSnapshotActions('cold'),
       },
       delete: {
-        enable: enable('delete'),
+        ...createToggleDeletePhaseActions(),
         setMinAgeValue: setMinAgeValue('delete'),
         setMinAgeUnits: setMinAgeUnits('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
@@ -61,7 +61,7 @@ describe('<EditPolicy />', () => {
       // Set max docs to test whether we keep the unknown fields in that object after serializing
       await actions.hot.setMaxDocs('1000');
       // Remove the delete phase to ensure that we also correctly remove data
-      await actions.delete.enable(false);
+      await actions.delete.disablePhase();
       await actions.savePolicy();
 
       const latestRequest = server.requests[server.requests.length - 1];
@@ -89,7 +89,7 @@ describe('<EditPolicy />', () => {
                 unknown_setting: true,
               },
             },
-            min_age: '0ms',
+            min_age: '0d',
           },
         },
       });
@@ -255,7 +255,7 @@ describe('<EditPolicy />', () => {
                 "priority": 50,
               },
             },
-            "min_age": "0ms",
+            "min_age": "0d",
           }
         `);
       });
@@ -310,7 +310,7 @@ describe('<EditPolicy />', () => {
                     "number_of_shards": 123,
                   },
                 },
-                "min_age": "0ms",
+                "min_age": "0d",
               },
             },
           }
@@ -839,7 +839,7 @@ describe('<EditPolicy />', () => {
       expect(actions.timeline.hasColdPhase()).toBe(true);
       expect(actions.timeline.hasDeletePhase()).toBe(false);
 
-      await actions.delete.enable(true);
+      await actions.delete.enablePhase();
       expect(actions.timeline.hasHotPhase()).toBe(true);
       expect(actions.timeline.hasWarmPhase()).toBe(true);
       expect(actions.timeline.hasColdPhase()).toBe(true);

diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/components/edit_policy.test.tsx b/x-pack/plugins/index_lifecycle_management/__jest__/components/edit_policy.test.tsx
@@ -99,6 +99,13 @@ const activatePhase = async (rendered: ReactWrapper, phase: string) => {
   });
   rendered.update();
 };
+const activateDeletePhase = async (rendered: ReactWrapper) => {
+  const testSubject = `enableDeletePhaseButton`;
+  await act(async () => {
+    await findTestSubject(rendered, testSubject).simulate('click');
+  });
+  rendered.update();
+};
 const openNodeAttributesSection = async (rendered: ReactWrapper, phase: string) => {
   const getControls = () => findTestSubject(rendered, `${phase}-dataTierAllocationControls`);
   await act(async () => {
@@ -454,6 +461,11 @@ describe('edit policy', () => {
       waitForFormLibValidation(rendered);
       expectedErrorMessages(rendered, [i18nTexts.editPolicy.errors.nonNegativeNumberRequired]);
     });
+
+    test("doesn't show min age input", async () => {
+      const rendered = mountWithIntl(component);
+      expect(findTestSubject(rendered, 'hot-selectedMinimumAge').exists()).toBeFalsy();
+    });
   });
   describe('warm phase', () => {
     beforeEach(() => {
@@ -670,6 +682,13 @@ describe('edit policy', () => {
       expect(rendered.find('.euiLoadingSpinner').exists()).toBeFalsy();
       expect(findTestSubject(rendered, 'defaultAllocationNotice').exists()).toBeFalsy();
     });
+
+    test('shows min age input only when enabled', async () => {
+      const rendered = mountWithIntl(component);
+      expect(findTestSubject(rendered, 'warm-selectedMinimumAge').exists()).toBeFalsy();
+      await activatePhase(rendered, 'warm');
+      expect(findTestSubject(rendered, 'warm-selectedMinimumAge').exists()).toBeTruthy();
+    });
   });
   describe('cold phase', () => {
     beforeEach(() => {
@@ -807,13 +826,20 @@ describe('edit policy', () => {
       expect(rendered.find('.euiLoadingSpinner').exists()).toBeFalsy();
       expect(findTestSubject(rendered, 'defaultAllocationNotice').exists()).toBeFalsy();
     });
+
+    test('shows min age input only when enabled', async () => {
+      const rendered = mountWithIntl(component);
+      expect(findTestSubject(rendered, 'cold-selectedMinimumAge').exists()).toBeFalsy();
+      await activatePhase(rendered, 'cold');
+      expect(findTestSubject(rendered, 'cold-selectedMinimumAge').exists()).toBeTruthy();
+    });
   });
   describe('delete phase', () => {
     test('should allow 0 for phase timing', async () => {
       const rendered = mountWithIntl(component);
       await noRollover(rendered);
       await setPolicyName(rendered, 'mypolicy');
-      await activatePhase(rendered, 'delete');
+      await activateDeletePhase(rendered);
       await setPhaseAfter(rendered, 'delete', '0');
       waitForFormLibValidation(rendered);
       expectedErrorMessages(rendered, []);
@@ -822,11 +848,18 @@ describe('edit policy', () => {
       const rendered = mountWithIntl(component);
       await noRollover(rendered);
       await setPolicyName(rendered, 'mypolicy');
-      await activatePhase(rendered, 'delete');
+      await activateDeletePhase(rendered);
       await setPhaseAfter(rendered, 'delete', '-1');
       waitForFormLibValidation(rendered);
       expectedErrorMessages(rendered, [i18nTexts.editPolicy.errors.nonNegativeNumberRequired]);
     });
+
+    test('is hidden when disabled', async () => {
+      const rendered = mountWithIntl(component);
+      expect(findTestSubject(rendered, 'delete-phaseContent').exists()).toBeFalsy();
+      await activateDeletePhase(rendered);
+      expect(findTestSubject(rendered, 'delete-phaseContent').exists()).toBeTruthy();
+    });
   });
   describe('not on cloud', () => {
     beforeEach(() => {

diff --git a/..._lifecycle_management/public/application/sections/edit_policy/components/active_badge.tsx b/..._lifecycle_management/public/application/sections/edit_policy/components/active_badge.tsx
diff --git a/...public/application/sections/edit_policy/components/active_highlight/active_highlight.scss b/...public/application/sections/edit_policy/components/active_highlight/active_highlight.scss
diff --git a/...ns/index_lifecycle_management/public/application/sections/edit_policy/components/index.ts b/...ns/index_lifecycle_management/public/application/sections/edit_policy/components/index.ts
@@ -5,14 +5,12 @@
  * 2.0.
  */
 
-export { ActiveBadge } from './active_badge';
 export { LearnMoreLink } from './learn_more_link';
 export { OptionalLabel } from './optional_label';
 export { PolicyJsonFlyout } from './policy_json_flyout';
 export { DescribedFormRow, ToggleFieldWithDescribedFormRow } from './described_form_row';
 export { FieldLoadingError } from './field_loading_error';
-export { ActiveHighlight } from './active_highlight';
 export { Timeline } from './timeline';
 export { FormErrorsCallout } from './form_errors_callout';
-
+export { PhaseFooter } from './phase_footer';
 export * from './phases';
diff --git a/...licy/components/active_highlight/index.ts → ..._policy/components/infinity_icon/index.ts b/...licy/components/active_highlight/index.ts → ..._policy/components/infinity_icon/index.ts
@@ -5,4 +5,4 @@
  * 2.0.
  */
 
-export { ActiveHighlight } from './active_highlight';
+export { InfinityIcon } from './infinity_icon';
diff --git a/...components/timeline/infinity_icon.svg.tsx → ...nents/infinity_icon/infinity_icon.svg.tsx b/...components/timeline/infinity_icon.svg.tsx → ...nents/infinity_icon/infinity_icon.svg.tsx
diff --git a/...nts/active_highlight/active_highlight.tsx → ...omponents/infinity_icon/infinity_icon.tsx b/...nts/active_highlight/active_highlight.tsx → ...omponents/infinity_icon/infinity_icon.tsx
@@ -6,13 +6,9 @@
  */
 
 import React, { FunctionComponent } from 'react';
+import { EuiIcon, EuiIconProps } from '@elastic/eui';
+import { InfinityIconSvg } from './infinity_icon.svg';
 
-import './active_highlight.scss';
-
-interface Props {
-  phase: 'hot' | 'warm' | 'cold';
-  enabled: boolean;
-}
-export const ActiveHighlight: FunctionComponent<Props> = ({ phase, enabled }) => {
-  return <div className={`ilmActivePhaseHighlight ${phase}Phase ${enabled ? 'active' : ''} `} />;
-};
+export const InfinityIcon: FunctionComponent<Omit<EuiIconProps, 'type'>> = (props) => (
+  <EuiIcon type={InfinityIconSvg} {...props} />
+);
diff --git a/...cycle_management/public/application/sections/edit_policy/components/phase_footer/index.ts b/...cycle_management/public/application/sections/edit_policy/components/phase_footer/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { PhaseFooter } from './phase_footer';
diff --git a/...nagement/public/application/sections/edit_policy/components/phase_footer/phase_footer.tsx b/...nagement/public/application/sections/edit_policy/components/phase_footer/phase_footer.tsx
@@ -0,0 +1,94 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FunctionComponent } from 'react';
+
+import { i18n } from '@kbn/i18n';
+
+import { EuiText, EuiButtonGroup, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+import { PhasesExceptDelete } from '../../../../../../common/types';
+
+import { usePhaseTimings } from '../../form';
+
+import { InfinityIconSvg } from '../infinity_icon/infinity_icon.svg';
+
+interface Props {
+  phase: PhasesExceptDelete;
+}
+
+export const PhaseFooter: FunctionComponent<Props> = ({ phase }) => {
+  const {
+    isDeletePhaseEnabled,
+    setDeletePhaseEnabled: setValue,
+    [phase]: phaseConfiguration,
+  } = usePhaseTimings();
+
+  if (!phaseConfiguration.isFinalDataPhase) {
+    return null;
+  }
+
+  const phaseDescription = isDeletePhaseEnabled
+    ? i18n.translate('xpack.indexLifecycleMgmt.editPolicy.phaseTiming.beforeDeleteDescription', {
+        defaultMessage: 'Data will be deleted after this phase',
+      })
+    : i18n.translate('xpack.indexLifecycleMgmt.editPolicy.phaseTiming.foreverTimingDescription', {
+        defaultMessage: 'Data will remain in this phase forever',
+      });
+
+  const selectedButton = isDeletePhaseEnabled
+    ? 'ilmEnableDeletePhaseButton'
+    : 'ilmDisableDeletePhaseButton';
+
+  const buttons = [
+    {
+      id: `ilmDisableDeletePhaseButton`,
+      label: i18n.translate(
+        'xpack.indexLifecycleMgmt.editPolicy.deletePhase.disablePhaseButtonLabel',
+        {
+          defaultMessage: 'Keep data in this phase forever',
+        }
+      ),
+      iconType: InfinityIconSvg,
+    },
+    {
+      id: `ilmEnableDeletePhaseButton`,
+      label: i18n.translate(
+        'xpack.indexLifecycleMgmt.editPolicy.deletePhase.enablePhaseButtonLabel',
+        {
+          defaultMessage: 'Delete data after this phase',
+        }
+      ),
+      iconType: 'trash',
+      'data-test-subj': 'enableDeletePhaseButton',
+    },
+  ];
+
+  return (
+    <EuiFlexGroup alignItems="center" gutterSize="s" wrap>
+      <EuiFlexItem grow={false}>
+        <EuiText size="s" color="subdued">
+          {phaseDescription}
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonGroup
+          legend={i18n.translate(
+            'xpack.indexLifecycleMgmt.editPolicy.deletePhase.buttonGroupLegend',
+            { defaultMessage: 'Enable or disable delete phase' }
+          )}
+          options={buttons}
+          idSelected={selectedButton}
+          onChange={(id) => {
+            setValue(id === 'ilmEnableDeletePhaseButton');
+          }}
+          isIconOnly={true}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/...fecycle_management/public/application/sections/edit_policy/components/phase_icon/index.ts b/...fecycle_management/public/application/sections/edit_policy/components/phase_icon/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { PhaseIcon } from './phase_icon';
diff --git a/..._management/public/application/sections/edit_policy/components/phase_icon/phase_icon.scss b/..._management/public/application/sections/edit_policy/components/phase_icon/phase_icon.scss
@@ -0,0 +1,33 @@
+.ilmPhaseIcon {
+  width: $euiSizeXL;
+  height: $euiSizeXL;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  background-color: $euiColorLightestShade;
+  &--disabled {
+    margin-top: $euiSizeS;
+    width: $euiSize;
+    height: $euiSize;
+  }
+  &--delete {
+    background-color: $euiColorLightShade;
+  }
+  &__inner--hot {
+    fill: $euiColorVis9_behindText;
+  }
+  &__inner--warm {
+    fill: $euiColorVis5_behindText;
+  }
+  &__inner--cold {
+    fill: $euiColorVis1_behindText;
+  }
+  &__inner--delete {
+    fill: $euiColorDarkShade;
+  }
+
+  &__inner--disabled {
+    fill: $euiColorMediumShade;
+  }
+}