Added changes for phase blocks

elastic · Feb 8, 2021 · ad70c1b · ad70c1b
1 parent 73ed835
commit ad70c1b
Show file tree

Hide file tree

Showing 13 changed files with 168 additions and 112 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
@@ -251,7 +251,7 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
   const createToggleDeletePhaseActions = () => {
     const enablePhase = async () => {
       await act(async () => {
-        find('enableDeletePhaseLink').simulate('click');
+        find('enableDeletePhaseButton').simulate('click');
       });
       component.update();
     };

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
@@ -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",
               },
             },
           }

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
@@ -100,7 +100,7 @@ const activatePhase = async (rendered: ReactWrapper, phase: string) => {
   rendered.update();
 };
 const activateDeletePhase = async (rendered: ReactWrapper) => {
-  const testSubject = `enableDeletePhaseLink`;
+  const testSubject = `enableDeletePhaseButton`;
   await act(async () => {
     await findTestSubject(rendered, testSubject).simulate('click');
   });
@@ -461,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(() => {
@@ -677,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(() => {
@@ -814,6 +826,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, '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 () => {
@@ -834,6 +853,13 @@ describe('edit policy', () => {
       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/...agement/public/application/sections/edit_policy/components/phase_footer/phase_footer.scss b/...agement/public/application/sections/edit_policy/components/phase_footer/phase_footer.scss
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
@@ -7,69 +7,88 @@
 
 import React, { FunctionComponent } from 'react';
 
-import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 
-import { EuiIcon, EuiText, EuiLink, EuiPanel } from '@elastic/eui';
+import { EuiText, EuiButtonGroup, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 import { PhasesExceptDelete } from '../../../../../../common/types';
 
 import { usePhaseTimings } from '../../form';
 
-import { InfinityIcon } from '../infinity_icon';
-import './phase_footer.scss';
+import { InfinityIconSvg } from '../infinity_icon/infinity_icon.svg';
 
 interface Props {
   phase: PhasesExceptDelete;
 }
 
 export const PhaseFooter: FunctionComponent<Props> = ({ phase }) => {
-  const phaseTimings = usePhaseTimings();
-  const phaseConfiguration = phaseTimings[phase];
-  const setValue = phaseTimings.setDeletePhaseEnabled;
+  const {
+    isDeletePhaseEnabled,
+    setDeletePhaseEnabled: setValue,
+    [phase]: phaseConfiguration,
+  } = usePhaseTimings();
 
-  if (phaseConfiguration === 'disabled' || phaseConfiguration === 'enabled') {
-    return (
-      <EuiPanel className={'ilmPhaseFooter'} hasShadow={false}>
-        <EuiText size={'s'}>&nbsp;</EuiText>
-      </EuiPanel>
-    );
+  if (!phaseConfiguration.isFinalDataPhase) {
+    return null;
   }
 
-  if (phaseConfiguration === 'forever') {
-    return (
-      <EuiPanel color={'subdued'} className={'ilmPhaseFooter'} hasShadow={false}>
-        <InfinityIcon size={'s'} />{' '}
-        <EuiText size={'s'} grow={false} className={'eui-displayInlineBlock'}>
-          <FormattedMessage
-            id="xpack.indexLifecycleMgmt.editPolicy.phaseTiming.foreverTimingDescription"
-            defaultMessage="Data will remain in this phase forever."
-          />{' '}
-          <EuiLink onClick={() => setValue(true)} data-test-subj={'enableDeletePhaseLink'}>
-            <FormattedMessage
-              id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.enablePhaseButtonLabel"
-              defaultMessage="Set delete age"
-            />
-          </EuiLink>
-        </EuiText>
-      </EuiPanel>
-    );
-  }
+  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 (
-    <EuiPanel color={'subdued'} className={'ilmPhaseFooter'} hasShadow={false}>
-      <EuiIcon type={'storage'} size={'s'} />{' '}
-      <EuiText size={'s'} grow={false} className={'eui-displayInlineBlock'}>
-        <FormattedMessage
-          id="xpack.indexLifecycleMgmt.editPolicy.phaseTiming.beforeDeleteDescription"
-          defaultMessage="Data will be deleted after this phase."
-        />{' '}
-        <EuiLink onClick={() => setValue(false)} data-test-subj={'disableDeletePhaseLink'}>
-          <FormattedMessage
-            id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.disablePhaseButtonLabel"
-            defaultMessage="Keep data"
-          />
-        </EuiLink>
-      </EuiText>
-    </EuiPanel>
+    <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/..._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
@@ -1,11 +1,16 @@
 .ilmPhaseIcon {
-  width: 32px;
-  height: 32px;
+  width: $euiSizeXL;
+  height: $euiSizeXL;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   background-color: $euiColorLightestShade;
+  &--disabled {
+    margin-top: calc(#{$euiSizeS} - 2px);
+    width: $euiSize;
+    height: $euiSize;
+  }
   &--delete {
     background-color: $euiColorLightShade;
   }

diff --git a/...e_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.tsx b/...e_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.tsx
@@ -25,7 +25,7 @@ export const PhaseIcon: FunctionComponent<Props> = ({ enabled, phase }) => {
           size={phase === 'delete' ? 'm' : 'l'}
         />
       ) : (
-        <EuiIcon className="ilmPhaseIcon__inner--disabled" type={'dot'} size={'l'} />
+        <EuiIcon className="ilmPhaseIcon__inner--disabled" type={'dot'} size={'s'} />
       )}
     </div>
   );

diff --git a/.../public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.scss b/.../public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.scss
@@ -3,13 +3,10 @@
     &__header {
       padding: $euiSize;
       background-color: $euiColorEmptyShade;
-
     }
     &__body {
       padding: $euiSize;
       background-color: $euiColorLightestShade;
-
     }
-
   }
 }
diff --git a/...t/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.tsx b/...t/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.tsx
@@ -73,9 +73,10 @@ export const DeletePhase: FunctionComponent = () => {
 
   return (
     <EuiComment
+      data-test-subj="delete-phaseContent"
       username={phaseTitle}
       actions={<MinAgeField phase={'delete'} />}
-      className="ilmDeletePhase"
+      className="ilmDeletePhase ilmPhase"
       timelineIcon={<PhaseIcon enabled={enabled} phase={'delete'} />}
     >
       <EuiText color="subdued" size={'s'} style={{ maxWidth: '50%' }}>

diff --git a/...cle_management/public/application/sections/edit_policy/components/phases/phase/phase.scss b/...cle_management/public/application/sections/edit_policy/components/phases/phase/phase.scss
@@ -5,14 +5,17 @@
       background-color: $euiColorEmptyShade;
     }
     &__body {
-      padding: 0;
+      padding: $euiSize;
     }
-
-  }
-  &__inner {
-    padding: $euiSize;
   }
   .ilmSettingsButton {
     color: $euiColorPrimary;
+    padding: $euiSizeS;
+  }
+  .euiCommentTimeline {
+    padding-top: $euiSize;
+    &::before {
+      height: calc(100% + #{$euiSizeXXL});
+    }
   }
 }
-Original file line number
+Diff line change
@@ Expand Up @@
               size={phase === 'delete' ? 'm' : 'l'}
             />
           ) : (
-            <EuiIcon className="ilmPhaseIcon__inner--disabled" type={'dot'} size={'l'} />
+            <EuiIcon className="ilmPhaseIcon__inner--disabled" type={'dot'} size={'s'} />
           )}
         </div>
       );
@@ Expand Down @@