[ILM] Rollover min age tooltip and copy fixes (#91110) (#91379)

* removed an unnecessary tooltip in rollover field, added a tooltip to min age field when rollover is enabled * slight update to copy, added jest test and added comment about testing * page title and timeline title to sentence case * added link to learn more about timing to phase timeline component * fix jest test copy * remove unused import * fix i18n * remove unused translations * slight refactor to conditional for clarity * slight refactor to i18n text naming Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
elastic · Feb 15, 2021 · bd52914 · bd52914
1 parent 957ba15
commit bd52914
Show file tree

Hide file tree

Showing 10 changed files with 108 additions and 37 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
@@ -22,8 +22,8 @@ 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';
+const createPolicyTitle = 'Create policy';
+const editPolicyTitle = 'Edit policy';
 
 window.scrollTo = jest.fn();
 

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
@@ -271,6 +271,9 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
     };
   };
 
+  const hasRolloverTipOnMinAge = (phase: Phases) => (): boolean =>
+    exists(`${phase}-rolloverMinAgeInputIconTip`);
+
   return {
     ...testBed,
     actions: {
@@ -306,6 +309,7 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
         setSelectedNodeAttribute: setSelectedNodeAttribute('warm'),
         setReplicas: setReplicas('warm'),
         hasErrorIndicator: () => exists('phaseErrorIndicator-warm'),
+        hasRolloverTipOnMinAge: hasRolloverTipOnMinAge('warm'),
         ...createShrinkActions('warm'),
         ...createForceMergeActions('warm'),
         setReadonly: setReadonly('warm'),
@@ -321,11 +325,13 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
         setFreeze,
         freezeExists,
         hasErrorIndicator: () => exists('phaseErrorIndicator-cold'),
+        hasRolloverTipOnMinAge: hasRolloverTipOnMinAge('cold'),
         ...createIndexPriorityActions('cold'),
         ...createSearchableSnapshotActions('cold'),
       },
       delete: {
         ...createToggleDeletePhaseActions(),
+        hasRolloverTipOnMinAge: hasRolloverTipOnMinAge('delete'),
         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
@@ -769,6 +769,38 @@ describe('<EditPolicy />', () => {
       });
     });
   });
+  describe('with rollover', () => {
+    beforeEach(async () => {
+      httpRequestsMockHelpers.setLoadPolicies([getDefaultHotPhasePolicy('my_policy')]);
+      httpRequestsMockHelpers.setListNodes({
+        isUsingDeprecatedDataRoleConfig: false,
+        nodesByAttributes: { test: ['123'] },
+        nodesByRoles: { data: ['123'] },
+      });
+      httpRequestsMockHelpers.setListSnapshotRepos({ repositories: ['abc'] });
+      httpRequestsMockHelpers.setLoadSnapshotPolicies([]);
+
+      await act(async () => {
+        testBed = await setup();
+      });
+
+      const { component } = testBed;
+      component.update();
+    });
+
+    test('shows rollover tip on minimum age', async () => {
+      const { actions } = testBed;
+
+      await actions.warm.enable(true);
+      await actions.cold.enable(true);
+      await actions.delete.enablePhase();
+
+      expect(actions.warm.hasRolloverTipOnMinAge()).toBeTruthy();
+      expect(actions.cold.hasRolloverTipOnMinAge()).toBeTruthy();
+      expect(actions.delete.hasRolloverTipOnMinAge()).toBeTruthy();
+    });
+  });
+
   describe('without rollover', () => {
     beforeEach(async () => {
       httpRequestsMockHelpers.setLoadPolicies([getDefaultHotPhasePolicy('my_policy')]);
@@ -778,6 +810,7 @@ describe('<EditPolicy />', () => {
         nodesByRoles: { data: ['123'] },
       });
       httpRequestsMockHelpers.setListSnapshotRepos({ repositories: ['found-snapshots'] });
+      httpRequestsMockHelpers.setLoadSnapshotPolicies([]);
 
       await act(async () => {
         testBed = await setup({
@@ -799,6 +832,20 @@ describe('<EditPolicy />', () => {
       expect(actions.hot.searchableSnapshotsExists()).toBeFalsy();
       expect(actions.cold.searchableSnapshotDisabledDueToRollover()).toBeTruthy();
     });
+
+    test('hiding rollover tip on minimum age', async () => {
+      const { actions } = testBed;
+      await actions.hot.toggleDefaultRollover(false);
+      await actions.hot.toggleRollover(false);
+
+      await actions.warm.enable(true);
+      await actions.cold.enable(true);
+      await actions.delete.enablePhase();
+
+      expect(actions.warm.hasRolloverTipOnMinAge()).toBeFalsy();
+      expect(actions.cold.hasRolloverTipOnMinAge()).toBeFalsy();
+      expect(actions.delete.hasRolloverTipOnMinAge()).toBeFalsy();
+    });
   });
 
   describe('policy timeline', () => {

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
@@ -13,4 +13,5 @@ export { FieldLoadingError } from './field_loading_error';
 export { Timeline } from './timeline';
 export { FormErrorsCallout } from './form_errors_callout';
 export { PhaseFooter } from './phase_footer';
+export { InfinityIcon } from './infinity_icon';
 export * from './phases';
diff --git a/...agement/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx b/...agement/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx
@@ -16,7 +16,6 @@ import {
   EuiCallOut,
   EuiTextColor,
   EuiSwitch,
-  EuiIconTip,
   EuiText,
 } from '@elastic/eui';
 
@@ -121,25 +120,12 @@ export const HotPhase: FunctionComponent = () => {
           <div aria-live="polite" role="region">
             <UseField<boolean> path="_meta.hot.customRollover.enabled">
               {(field) => (
-                <>
-                  <EuiSwitch
-                    label={field.label}
-                    checked={field.value}
-                    onChange={(e) => field.setValue(e.target.checked)}
-                    data-test-subj="rolloverSwitch"
-                  />
-                  &nbsp;
-                  <EuiIconTip
-                    type="questionInCircle"
-                    content={
-                      <FormattedMessage
-                        id="xpack.indexLifecycleMgmt.editPolicy.hotPhase.enableRolloverTipContent"
-                        defaultMessage="Roll over to a new index when the
-    current index meets one of the defined conditions."
-                      />
-                    }
-                  />
-                </>
+                <EuiSwitch
+                  label={field.label}
+                  checked={field.value}
+                  onChange={(e) => field.setValue(e.target.checked)}
+                  data-test-subj="rolloverSwitch"
+                />
               )}
             </UseField>
             {isUsingRollover && (

diff --git a/...tion/sections/edit_policy/components/phases/shared_fields/min_age_field/min_age_field.tsx b/...tion/sections/edit_policy/components/phases/shared_fields/min_age_field/min_age_field.tsx
@@ -17,11 +17,12 @@ import {
   EuiFormRow,
   EuiSelect,
   EuiText,
+  EuiIconTip,
 } from '@elastic/eui';
 
 import { getFieldValidityAndErrorMessage } from '../../../../../../../shared_imports';
 
-import { UseField } from '../../../../form';
+import { UseField, useConfigurationIssues } from '../../../../form';
 
 import { getUnitsAriaLabelForPhase, getTimingLabelForPhase } from './util';
 
@@ -62,13 +63,25 @@ const i18nTexts = {
       defaultMessage: 'nanoseconds',
     }
   ),
+  rolloverToolTipDescription: i18n.translate(
+    'xpack.indexLifecycleMgmt.editPolicy.minimumAge.rolloverToolTipDescription',
+    {
+      defaultMessage:
+        'Data age is calculated from rollover. Rollover is configured in the hot phase.',
+    }
+  ),
+  minAgeUnitFieldSuffix: i18n.translate(
+    'xpack.indexLifecycleMgmt.editPolicy.minimumAge.minimumAgeFieldSuffixLabel',
+    { defaultMessage: 'old' }
+  ),
 };
 
 interface Props {
   phase: PhaseWithMinAgeAction;
 }
 
 export const MinAgeField: FunctionComponent<Props> = ({ phase }): React.ReactElement => {
+  const { isUsingRollover } = useConfigurationIssues();
   return (
     <UseField path={`phases.${phase}.min_age`}>
       {(field) => {
@@ -110,6 +123,22 @@ export const MinAgeField: FunctionComponent<Props> = ({ phase }): React.ReactEle
                         const { isInvalid: isUnitFieldInvalid } = getFieldValidityAndErrorMessage(
                           unitField
                         );
+                        const icon = (
+                          <>
+                            {/* This element is rendered for testing purposes only */}
+                            <div data-test-subj={`${phase}-rolloverMinAgeInputIconTip`} />
+                            <EuiIconTip
+                              type="iInCircle"
+                              aria-label={i18nTexts.rolloverToolTipDescription}
+                              content={i18nTexts.rolloverToolTipDescription}
+                            />
+                          </>
+                        );
+                        const selectAppendValue: Array<
+                          string | React.ReactElement
+                        > = isUsingRollover
+                          ? [i18nTexts.minAgeUnitFieldSuffix, icon]
+                          : [i18nTexts.minAgeUnitFieldSuffix];
                         return (
                           <EuiSelect
                             compressed
@@ -118,7 +147,7 @@ export const MinAgeField: FunctionComponent<Props> = ({ phase }): React.ReactEle
                               unitField.setValue(e.target.value);
                             }}
                             isInvalid={isUnitFieldInvalid}
-                            append={'old'}
+                            append={selectAppendValue}
                             data-test-subj={`${phase}-selectedMinimumAgeUnits`}
                             aria-label={getUnitsAriaLabelForPhase(phase)}
                             options={[

diff --git a/...cycle_management/public/application/sections/edit_policy/components/timeline/timeline.tsx b/...cycle_management/public/application/sections/edit_policy/components/timeline/timeline.tsx
@@ -6,6 +6,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import React, { FunctionComponent, memo } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiText, EuiIconTip } from '@elastic/eui';
@@ -18,7 +19,7 @@ import {
   AbsoluteTimings,
 } from '../../lib';
 
-import { InfinityIcon } from '../infinity_icon';
+import { InfinityIcon, LearnMoreLink } from '..';
 
 import { TimelinePhaseText } from './components';
 
@@ -47,21 +48,14 @@ const SCORE_BUFFER_AMOUNT = 50;
 
 const i18nTexts = {
   title: i18n.translate('xpack.indexLifecycleMgmt.timeline.title', {
-    defaultMessage: 'Policy Summary',
+    defaultMessage: 'Policy summary',
   }),
   description: i18n.translate('xpack.indexLifecycleMgmt.timeline.description', {
     defaultMessage: 'This policy moves data through the following phases.',
   }),
   hotPhase: i18n.translate('xpack.indexLifecycleMgmt.timeline.hotPhaseSectionTitle', {
     defaultMessage: 'Hot phase',
   }),
-  rolloverTooltip: i18n.translate(
-    'xpack.indexLifecycleMgmt.timeline.hotPhaseRolloverToolTipContent',
-    {
-      defaultMessage:
-        'How long it takes to reach the rollover criteria in the hot phase can vary. Data moves to the next phase when the time since rollover reaches the minimum age.',
-    }
-  ),
   warmPhase: i18n.translate('xpack.indexLifecycleMgmt.timeline.warmPhaseSectionTitle', {
     defaultMessage: 'Warm phase',
   }),
@@ -143,6 +137,16 @@ export const Timeline: FunctionComponent<Props> = memo(
           </EuiTitle>
           <EuiText size="s" color="subdued">
             {i18nTexts.description}
+            &nbsp;
+            <LearnMoreLink
+              docPath="ilm-index-lifecycle.html#ilm-phase-transitions"
+              text={
+                <FormattedMessage
+                  id="xpack.indexLifecycleMgmt.editPolicy.learnAboutTimingText"
+                  defaultMessage="Learn about timing"
+                />
+              }
+            />
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem>

diff --git a/...lugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx b/...lugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx
@@ -142,10 +142,10 @@ export const EditPolicy: React.FunctionComponent<Props> = ({ history }) => {
                 <h1>
                   {isNewPolicy
                     ? i18n.translate('xpack.indexLifecycleMgmt.editPolicy.createPolicyMessage', {
-                        defaultMessage: 'Create Policy',
+                        defaultMessage: 'Create policy',
                       })
                     : i18n.translate('xpack.indexLifecycleMgmt.editPolicy.editPolicyMessage', {
-                        defaultMessage: 'Edit Policy {originalPolicyName}',
+                        defaultMessage: 'Edit policy {originalPolicyName}',
                         values: { originalPolicyName },
                       })}
                 </h1>

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -9474,7 +9474,6 @@
     "xpack.indexLifecycleMgmt.editPolicy.forcemerge.numberOfSegmentsRequiredError": "セグメント数の評価が必要です。",
     "xpack.indexLifecycleMgmt.editPolicy.formErrorsMessage": "このページのエラーを修正してください。",
     "xpack.indexLifecycleMgmt.editPolicy.hidePolicyJsonButto": "リクエストを非表示",
-    "xpack.indexLifecycleMgmt.editPolicy.hotPhase.enableRolloverTipContent": "現在のインデックスが定義された条件のいずれかを満たすときに、新しいインデックスにロールオーバーします。",
     "xpack.indexLifecycleMgmt.editPolicy.hotPhase.learnAboutRolloverLinkText": "詳細",
     "xpack.indexLifecycleMgmt.editPolicy.hotPhase.rolloverDefaultsTipContent": "インデックスが 30 日経過するか、50 GB に達したらロールオーバーします。",
     "xpack.indexLifecycleMgmt.editPolicy.hotPhase.rolloverDescriptionMessage": "効率的なストレージと高いパフォーマンスのための時系列データの自動ロールアウト。",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -9498,7 +9498,6 @@
     "xpack.indexLifecycleMgmt.editPolicy.forcemerge.numberOfSegmentsRequiredError": "必须指定分段数的值。",
     "xpack.indexLifecycleMgmt.editPolicy.formErrorsMessage": "请修复此页面上的错误。",
     "xpack.indexLifecycleMgmt.editPolicy.hidePolicyJsonButto": "隐藏请求",
-    "xpack.indexLifecycleMgmt.editPolicy.hotPhase.enableRolloverTipContent": "在当前索引满足定义的条件之一时，滚动更新到新索引。",
     "xpack.indexLifecycleMgmt.editPolicy.hotPhase.learnAboutRolloverLinkText": "了解详情",
     "xpack.indexLifecycleMgmt.editPolicy.hotPhase.rolloverDefaultsTipContent": "当索引已存在 30 天或达到 50 GB 时滚动更新。",
     "xpack.indexLifecycleMgmt.editPolicy.hotPhase.rolloverDescriptionMessage": "自动滚动更新时间序列数据，以实现高效存储和更高性能。",