[ILM] New copy for rollover and small refactor for timeline (#89422)

* refactor timeline and relative ms calculation logic for easier use outside of edit_policy section

* further refactor, move child component to own file in timeline, and clean up public API for relative timing calculation

* added copy to call out variation in timing (slop) introduced by rollover

* use separate copy for timeline

* remove unused import

* fix unresolved merge

* implement copy feedback

* added component integration for showing/hiding hot phase icon on timeline

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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

@@ -251,6 +251,7 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
       setWaitForSnapshotPolicy,
       savePolicy,
       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

@@ -843,5 +843,13 @@ 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);
+    });
   });
 });

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

@@ -16,6 +16,7 @@ import {
   EuiTextColor,
   EuiSwitch,
   EuiIconTip,
+  EuiIcon,
 } from '@elastic/eui';
 
 import { useFormData, UseField, SelectField, NumericField } from '../../../../../../shared_imports';
@@ -80,6 +81,10 @@ export const HotPhase: FunctionComponent = () => {
               </p>
             </EuiTextColor>
             <EuiSpacer />
+            <EuiIcon type="iInCircle" />
+            &nbsp;
+            {i18nTexts.editPolicy.rolloverOffsetsHotPhaseTiming}
+            <EuiSpacer />
             <UseField<boolean> path={isUsingDefaultRolloverPath}>
               {(field) => (
                 <>

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

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { TimelinePhaseText } from './timeline_phase_text';

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

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FunctionComponent, ReactNode } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+
+export const TimelinePhaseText: FunctionComponent<{
+  phaseName: ReactNode | string;
+  durationInPhase?: ReactNode | string;
+}> = ({ phaseName, durationInPhase }) => (
+  <EuiFlexGroup justifyContent="spaceBetween" gutterSize="none">
+    <EuiFlexItem>
+      <EuiText size="s">
+        <strong>{phaseName}</strong>
+      </EuiText>
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      {typeof durationInPhase === 'string' ? (
+        <EuiText size="s">{durationInPhase}</EuiText>
+      ) : (
+        durationInPhase
+      )}
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);

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

@@ -3,4 +3,4 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-export { Timeline } from './timeline';
+export { Timeline } from './timeline.container';

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

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FunctionComponent } from 'react';
+
+import { useFormData } from '../../../../../shared_imports';
+
+import { formDataToAbsoluteTimings } from '../../lib';
+
+import { useConfigurationIssues } from '../../form';
+
+import { FormInternal } from '../../types';
+
+import { Timeline as ViewComponent } from './timeline';
+
+export const Timeline: FunctionComponent = () => {
+  const [formData] = useFormData<FormInternal>();
+  const timings = formDataToAbsoluteTimings(formData);
+  const { isUsingRollover } = useConfigurationIssues();
+  return (
+    <ViewComponent
+      hotPhaseMinAge={timings.hot.min_age}
+      warmPhaseMinAge={timings.warm?.min_age}
+      coldPhaseMinAge={timings.cold?.min_age}
+      deletePhaseMinAge={timings.delete?.min_age}
+      isUsingRollover={isUsingRollover}
+      hasDeletePhase={Boolean(formData._meta?.delete?.enabled)}
+    />
+  );
+};

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

@@ -84,4 +84,8 @@ $ilmDeletePhaseColor: shadeOrTint($euiColorVis5, 40%, 40%);
       background-color: $euiColorVis1;
     }
   }
+
+  &__rolloverIcon {
+    display: inline-block;
+  }
 }