[7.x] [ILM] Simplify timeline and rollover info (#90004)

x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.helpers.tsx

@@ -278,7 +278,6 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
       savePolicy,
       hasGlobalErrorCallout: () => exists('policyFormErrorsCallout'),
       timeline: {
-        hasRolloverIndicator: () => exists('timelineHotPhaseRolloverToolTip'),
         hasHotPhase: () => exists('ilmTimelineHotPhase'),
         hasWarmPhase: () => exists('ilmTimelineWarmPhase'),
         hasColdPhase: () => exists('ilmTimelineColdPhase'),

x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.test.ts

@@ -845,14 +845,6 @@ describe('<EditPolicy />', () => {
       expect(actions.timeline.hasColdPhase()).toBe(true);
       expect(actions.timeline.hasDeletePhase()).toBe(true);
     });
-
-    test('show and hide rollover indicator on timeline', async () => {
-      const { actions } = testBed;
-      expect(actions.timeline.hasRolloverIndicator()).toBe(true);
-      await actions.hot.toggleDefaultRollover(false);
-      await actions.hot.toggleRollover(false);
-      expect(actions.timeline.hasRolloverIndicator()).toBe(false);
-    });
   });
 
   describe('policy error notifications', () => {

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx

@@ -17,7 +17,7 @@ import {
   EuiTextColor,
   EuiSwitch,
   EuiIconTip,
-  EuiIcon,
+  EuiText,
 } from '@elastic/eui';
 
 import { useFormData, SelectField, NumericField } from '../../../../../../shared_imports';
@@ -68,8 +68,20 @@ export const HotPhase: FunctionComponent = () => {
               <p>
                 <FormattedMessage
                   id="xpack.indexLifecycleMgmt.editPolicy.hotPhase.rolloverDescriptionMessage"
-                  defaultMessage="Automate rollover of time series data for efficient storage and higher performance."
-                />{' '}
+                  defaultMessage="Start writing to a new index when the current index reaches a certain size, document count, or age. Enables you to optimize performance and manage resource usage when working with time series data."
+                />
+              </p>
+            </EuiTextColor>
+            <EuiSpacer />
+            <EuiTextColor color="subdued">
+              <p>
+                <strong>
+                  {i18n.translate(
+                    'xpack.indexLifecycleMgmt.rollover.rolloverOffsetsPhaseTimingDescriptionNote',
+                    { defaultMessage: 'Note: ' }
+                  )}
+                </strong>
+                {i18nTexts.editPolicy.rolloverOffsetsHotPhaseTiming}{' '}
                 <LearnMoreLink
                   text={
                     <FormattedMessage
@@ -82,28 +94,21 @@ export const HotPhase: FunctionComponent = () => {
               </p>
             </EuiTextColor>
             <EuiSpacer />
-            <EuiIcon type="iInCircle" />
-            &nbsp;
-            {i18nTexts.editPolicy.rolloverOffsetsHotPhaseTiming}
-            <EuiSpacer />
             <UseField<boolean> path={isUsingDefaultRolloverPath}>
               {(field) => (
                 <>
-                  <EuiSwitch
-                    label={field.label}
-                    checked={field.value}
-                    onChange={(e) => field.setValue(e.target.checked)}
-                    data-test-subj="useDefaultRolloverSwitch"
-                  />
-                  &nbsp;
-                  <EuiIconTip
-                    type="questionInCircle"
-                    content={
-                      <FormattedMessage
-                        id="xpack.indexLifecycleMgmt.editPolicy.hotPhase.rolloverDefaultsTipContent"
-                        defaultMessage="Rollover when an index is 30 days old or reaches 50 gigabytes."
-                      />
-                    }
+                  <EuiText color="default">
+                    <EuiSwitch
+                      label={field.label}
+                      checked={field.value}
+                      onChange={(e) => field.setValue(e.target.checked)}
+                      data-test-subj="useDefaultRolloverSwitch"
+                    />
+                  </EuiText>
+                  <EuiSpacer size="s" />
+                  <FormattedMessage
+                    id="xpack.indexLifecycleMgmt.editPolicy.hotPhase.rolloverDefaultsTipContent"
+                    defaultMessage="Rollover when an index is 30 days old or reaches 50 gigabytes."
                   />
                 </>
               )}

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/forcemerge_field.tsx

@@ -45,7 +45,7 @@ export const ForcemergeField: React.FunctionComponent<Props> = ({ phase }) => {
         <>
           <FormattedMessage
             id="xpack.indexLifecycleMgmt.editPolicy.forceMerge.enableExplanationText"
-            defaultMessage="Reduce the number of segments in your shard by merging smaller files and clearing deleted ones."
+            defaultMessage="Reduce the number of segments in each index shard and clean up deleted documents."
           />{' '}
           <LearnMoreLink docPath="ilm-forcemerge.html" />
         </>

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/searchable_snapshot_field/searchable_snapshot_field.tsx

@@ -342,7 +342,7 @@ export const SearchableSnapshotField: FunctionComponent<Props> = ({ phase }) =>
           <EuiTextColor color="subdued">
             <FormattedMessage
               id="xpack.indexLifecycleMgmt.editPolicy.searchableSnapshotFieldDescription"
-              defaultMessage="Take a snapshot of the managed index in the selected repository and mount it as a searchable snapshot. {learnMoreLink}."
+              defaultMessage="Take a snapshot of the managed index in the selected repository and mount it as a searchable snapshot. {learnMoreLink}"
               values={{
                 learnMoreLink: <LearnMoreLink docPath="ilm-searchable-snapshot.html" />,
               }}

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/shrink_field.tsx

@@ -38,7 +38,7 @@ export const ShrinkField: FunctionComponent<Props> = ({ phase }) => {
         <EuiTextColor color="subdued">
           <FormattedMessage
             id="xpack.indexLifecycleMgmt.editPolicy.shrinkIndexExplanationText"
-            defaultMessage="Shrink the index into a new index with fewer primary shards."
+            defaultMessage="Shrink the index to a new index with fewer primary shards."
           />{' '}
           <LearnMoreLink docPath="ilm-shrink.html" />
         </EuiTextColor>

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/components/timeline_phase_text.tsx

@@ -12,8 +12,8 @@ export const TimelinePhaseText: FunctionComponent<{
   phaseName: ReactNode | string;
   durationInPhase?: ReactNode | string;
 }> = ({ phaseName, durationInPhase }) => (
-  <EuiFlexGroup justifyContent="spaceBetween" gutterSize="none">
-    <EuiFlexItem>
+  <EuiFlexGroup alignItems="center" justifyContent="flexStart" gutterSize="s">
+    <EuiFlexItem grow={false}>
       <EuiText size="s">
         <strong>{phaseName}</strong>
       </EuiText>

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.scss

@@ -1,11 +1,5 @@
 $ilmTimelineBarHeight: $euiSizeS;
 
-/*
-* For theming we need to shade or tint to get the right color from the base EUI color
-*/
-$ilmDeletePhaseBackgroundColor: tintOrShade($euiColorVis5_behindText, 80%,80%);
-$ilmDeletePhaseColor: shadeOrTint($euiColorVis5, 40%, 40%);
-
 .ilmTimeline {
   overflow: hidden;
   width: 100%;
@@ -49,14 +43,16 @@ $ilmDeletePhaseColor: shadeOrTint($euiColorVis5, 40%, 40%);
     */
     padding: $euiSizeM;
     margin-left: $euiSizeM;
-    background-color: $ilmDeletePhaseBackgroundColor;
-    color: $ilmDeletePhaseColor;
-    border-radius: calc(#{$euiSizeS} / 2);
+    background-color: $euiColorLightestShade;
+    color: $euiColorDarkShade;
+    border-radius: 50%;
   }
 
   &__colorBar {
     display: inline-block;
     height: $ilmTimelineBarHeight;
+    margin-top: $euiSizeS;
+    margin-bottom: $euiSizeXS;
     border-radius: calc(#{$ilmTimelineBarHeight} / 2);
     width: 100%;
   }
@@ -84,8 +80,4 @@ $ilmDeletePhaseColor: shadeOrTint($euiColorVis5, 40%, 40%);
       background-color: $euiColorVis1;
     }
   }
-
-  &__rolloverIcon {
-    display: inline-block;
-  }
 }

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.tsx

@@ -8,14 +8,12 @@
 import { i18n } from '@kbn/i18n';
 
 import React, { FunctionComponent, memo } from 'react';
-
-import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiIconTip } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiText, EuiIconTip } from '@elastic/eui';
 
 import { PhasesExceptDelete } from '../../../../../../common/types';
 
 import {
   calculateRelativeFromAbsoluteMilliseconds,
-  normalizeTimingsToHumanReadable,
   PhaseAgeInMilliseconds,
   AbsoluteTimings,
 } from '../../lib';
@@ -48,6 +46,12 @@ const msTimeToOverallPercent = (ms: number, totalMs: number) => {
 const SCORE_BUFFER_AMOUNT = 50;
 
 const i18nTexts = {
+  title: i18n.translate('xpack.indexLifecycleMgmt.timeline.title', {
+    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',
   }),
@@ -69,6 +73,11 @@ const i18nTexts = {
       defaultMessage: 'Policy deletes the index after lifecycle phases complete.',
     }),
   },
+  foreverIcon: {
+    ariaLabel: i18n.translate('xpack.indexLifecycleMgmt.timeline.foreverIconToolTipContent', {
+      defaultMessage: 'Forever',
+    }),
+  },
 };
 
 const calculateWidths = (inputs: PhaseAgeInMilliseconds) => {
@@ -118,27 +127,23 @@ export const Timeline: FunctionComponent<Props> = memo(
     };
 
     const phaseAgeInMilliseconds = calculateRelativeFromAbsoluteMilliseconds(absoluteTimings);
-    const humanReadableTimings = normalizeTimingsToHumanReadable(phaseAgeInMilliseconds);
 
     const widths = calculateWidths(phaseAgeInMilliseconds);
 
     const getDurationInPhaseContent = (phase: PhasesExceptDelete): string | React.ReactNode =>
       phaseAgeInMilliseconds.phases[phase] === Infinity ? (
-        <InfinityIcon aria-label={humanReadableTimings[phase]} />
-      ) : (
-        humanReadableTimings[phase]
-      );
+        <InfinityIcon color="subdued" aria-label={i18nTexts.foreverIcon.ariaLabel} />
+      ) : null;
 
     return (
       <EuiFlexGroup gutterSize="s" direction="column" responsive={false}>
         <EuiFlexItem>
           <EuiTitle size="s">
-            <h2>
-              {i18n.translate('xpack.indexLifecycleMgmt.timeline.title', {
-                defaultMessage: 'Policy Timeline',
-              })}
-            </h2>
+            <h2>{i18nTexts.title}</h2>
           </EuiTitle>
+          <EuiText size="s" color="subdued">
+            {i18nTexts.description}
+          </EuiText>
         </EuiFlexItem>
         <EuiFlexItem>
           <div
@@ -161,22 +166,7 @@ export const Timeline: FunctionComponent<Props> = memo(
                   >
                     <div className="ilmTimeline__colorBar ilmTimeline__hotPhase__colorBar" />
                     <TimelinePhaseText
-                      phaseName={
-                        isUsingRollover ? (
-                          <>
-                            {i18nTexts.hotPhase}
-                            &nbsp;
-                            <div
-                              className="ilmTimeline__rolloverIcon"
-                              data-test-subj="timelineHotPhaseRolloverToolTip"
-                            >
-                              <EuiIconTip type="iInCircle" content={i18nTexts.rolloverTooltip} />
-                            </div>
-                          </>
-                        ) : (
-                          i18nTexts.hotPhase
-                        )
-                      }
+                      phaseName={i18nTexts.hotPhase}
                       durationInPhase={getDurationInPhaseContent('hot')}
                     />
                   </div>

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/i18n_texts.ts

@@ -16,7 +16,7 @@ export const i18nTexts = {
       'xpack.indexLifecycleMgmt.rollover.rolloverOffsetsPhaseTimingDescription',
       {
         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.',
+          'How long it takes to reach the rollover criteria in the hot phase can vary.',
       }
     ),
     searchableSnapshotInHotPhase: {
@@ -195,7 +195,7 @@ export const i18nTexts = {
     descriptions: {
       hot: i18n.translate('xpack.indexLifecycleMgmt.editPolicy.hotPhase.hotPhaseDescription', {
         defaultMessage:
-          'This phase is required. You are actively querying and writing to your index. For faster updates, you can roll over the index when it gets too big or too old.',
+          'You actively store and query data in the hot phase. All policies have a hot phase.',
       }),
       warm: i18n.translate('xpack.indexLifecycleMgmt.editPolicy.warmPhase.warmPhaseDescription', {
         defaultMessage: