[ILM] Add support for frozen phase in UI (#75968) (#76268)

* ILM public side changes to support frozen phase

This is a very faithful duplication of the cold phase. We are
also excluding the snapshot action as well as the unfollow action
as these are features that require higher than basic license
privilege.

* added "frozen" to the server side schema

* add frozen phases component

* fix i18n and update jest tests

* Slight restructuring to phase types and fix copy paste issues.

- also fixed TS error introduced after TS v4 upgrade (delete)

* fix hot phase type and remove type constraint from error messages

* update validation logic

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/index_lifecycle_management/public/application/constants/policy.ts

@@ -10,6 +10,7 @@ import {
   DeletePhase,
   HotPhase,
   WarmPhase,
+  FrozenPhase,
 } from '../services/policies/types';
 
 export const defaultNewHotPhase: HotPhase = {
@@ -47,6 +48,16 @@ export const defaultNewColdPhase: ColdPhase = {
   phaseIndexPriority: '0',
 };
 
+export const defaultNewFrozenPhase: FrozenPhase = {
+  phaseEnabled: false,
+  selectedMinimumAge: '0',
+  selectedMinimumAgeUnits: 'd',
+  selectedNodeAttrs: '',
+  selectedReplicaCount: '',
+  freezeEnabled: false,
+  phaseIndexPriority: '0',
+};
+
 export const defaultNewDeletePhase: DeletePhase = {
   phaseEnabled: false,
   selectedMinimumAge: '0',

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

@@ -12,7 +12,7 @@ import { EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSelect } from
 import { LearnMoreLink } from './learn_more_link';
 import { ErrableFormRow } from './form_errors';
 import { PhaseValidationErrors, propertyof } from '../../../services/policies/policy_validation';
-import { ColdPhase, DeletePhase, Phase, Phases, WarmPhase } from '../../../services/policies/types';
+import { PhaseWithMinAge, Phases } from '../../../services/policies/types';
 
 function getTimingLabelForPhase(phase: keyof Phases) {
   // NOTE: Hot phase isn't necessary, because indices begin in the hot phase.
@@ -27,6 +27,11 @@ function getTimingLabelForPhase(phase: keyof Phases) {
         defaultMessage: 'Timing for cold phase',
       });
 
+    case 'frozen':
+      return i18n.translate('xpack.indexLifecycleMgmt.editPolicy.phaseFrozen.minimumAgeLabel', {
+        defaultMessage: 'Timing for frozen phase',
+      });
+
     case 'delete':
       return i18n.translate('xpack.indexLifecycleMgmt.editPolicy.phaseDelete.minimumAgeLabel', {
         defaultMessage: 'Timing for delete phase',
@@ -63,7 +68,7 @@ function getUnitsAriaLabelForPhase(phase: keyof Phases) {
   }
 }
 
-interface Props<T extends Phase> {
+interface Props<T extends PhaseWithMinAge> {
   rolloverEnabled: boolean;
   errors?: PhaseValidationErrors<T>;
   phase: keyof Phases & string;
@@ -72,7 +77,7 @@ interface Props<T extends Phase> {
   isShowingErrors: boolean;
 }
 
-export const MinAgeInput = <Phase extends WarmPhase | ColdPhase | DeletePhase>({
+export const MinAgeInput = <Phase extends PhaseWithMinAge>({
   rolloverEnabled,
   errors,
   phaseData,

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

@@ -20,7 +20,7 @@ import { LearnMoreLink } from './learn_more_link';
 import { ErrableFormRow } from './form_errors';
 import { useLoadNodes } from '../../../services/api';
 import { NodeAttrsDetails } from './node_attrs_details';
-import { ColdPhase, Phase, Phases, WarmPhase } from '../../../services/policies/types';
+import { PhaseWithAllocationAction, Phases } from '../../../services/policies/types';
 import { PhaseValidationErrors, propertyof } from '../../../services/policies/policy_validation';
 
 const learnMoreLink = (
@@ -38,14 +38,14 @@ const learnMoreLink = (
   </Fragment>
 );
 
-interface Props<T extends Phase> {
+interface Props<T extends PhaseWithAllocationAction> {
   phase: keyof Phases & string;
   errors?: PhaseValidationErrors<T>;
   phaseData: T;
   setPhaseData: (dataKey: keyof T & string, value: string) => void;
   isShowingErrors: boolean;
 }
-export const NodeAllocation = <T extends WarmPhase | ColdPhase>({
+export const NodeAllocation = <T extends PhaseWithAllocationAction>({
   phase,
   setPhaseData,
   errors,

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

@@ -10,17 +10,17 @@ import { EuiFieldNumber, EuiTextColor, EuiDescribedFormGroup } from '@elastic/eu
 import { LearnMoreLink } from './';
 import { OptionalLabel } from './';
 import { ErrableFormRow } from './';
-import { ColdPhase, HotPhase, Phase, Phases, WarmPhase } from '../../../services/policies/types';
+import { PhaseWithIndexPriority, Phases } from '../../../services/policies/types';
 import { PhaseValidationErrors, propertyof } from '../../../services/policies/policy_validation';
 
-interface Props<T extends Phase> {
+interface Props<T extends PhaseWithIndexPriority> {
   errors?: PhaseValidationErrors<T>;
   phase: keyof Phases & string;
   phaseData: T;
   setPhaseData: (dataKey: keyof T & string, value: any) => void;
   isShowingErrors: boolean;
 }
-export const SetPriorityInput = <T extends HotPhase | WarmPhase | ColdPhase>({
+export const SetPriorityInput = <T extends PhaseWithIndexPriority>({
   errors,
   phaseData,
   phase,

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

@@ -28,7 +28,7 @@ import {
 
 import { toasts } from '../../services/notification';
 
-import { Policy, PolicyFromES } from '../../services/policies/types';
+import { Phases, Policy, PolicyFromES } from '../../services/policies/types';
 import {
   validatePolicy,
   ValidationErrors,
@@ -42,7 +42,7 @@ import {
 } from '../../services/policies/policy_serialization';
 
 import { ErrableFormRow, LearnMoreLink, PolicyJsonFlyout } from './components';
-import { ColdPhase, DeletePhase, HotPhase, WarmPhase } from './phases';
+import { ColdPhase, DeletePhase, FrozenPhase, HotPhase, WarmPhase } from './phases';
 
 interface Props {
   policies: PolicyFromES[];
@@ -118,7 +118,7 @@ export const EditPolicy: React.FunctionComponent<Props> = ({
     setIsShowingPolicyJsonFlyout(!isShowingPolicyJsonFlyout);
   };
 
-  const setPhaseData = (phase: 'hot' | 'warm' | 'cold' | 'delete', key: string, value: any) => {
+  const setPhaseData = (phase: keyof Phases, key: string, value: any) => {
     setPolicy({
       ...policy,
       phases: {
@@ -303,6 +303,16 @@ export const EditPolicy: React.FunctionComponent<Props> = ({
 
             <EuiHorizontalRule />
 
+            <FrozenPhase
+              errors={errors?.frozen}
+              isShowingErrors={isShowingErrors && !!errors && Object.keys(errors.frozen).length > 0}
+              setPhaseData={(key, value) => setPhaseData('frozen', key, value)}
+              phaseData={policy.phases.frozen}
+              hotPhaseRolloverEnabled={policy.phases.hot.rolloverEnabled}
+            />
+
+            <EuiHorizontalRule />
+
             <DeletePhase
               errors={errors?.delete}
               isShowingErrors={isShowingErrors && !!errors && Object.keys(errors.delete).length > 0}

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

@@ -19,7 +19,7 @@ import {
 } from '@elastic/eui';
 
 import { ColdPhase as ColdPhaseInterface, Phases } from '../../../services/policies/types';
-import { PhaseValidationErrors, propertyof } from '../../../services/policies/policy_validation';
+import { PhaseValidationErrors } from '../../../services/policies/policy_validation';
 
 import {
   LearnMoreLink,
@@ -36,9 +36,8 @@ const freezeLabel = i18n.translate('xpack.indexLifecycleMgmt.coldPhase.freezeInd
   defaultMessage: 'Freeze index',
 });
 
-const coldProperty = propertyof<Phases>('cold');
-const phaseProperty = (propertyName: keyof ColdPhaseInterface) =>
-  propertyof<ColdPhaseInterface>(propertyName);
+const coldProperty: keyof Phases = 'cold';
+const phaseProperty = (propertyName: keyof ColdPhaseInterface) => propertyName;
 
 interface Props {
   setPhaseData: (key: keyof ColdPhaseInterface & string, value: string | boolean) => void;

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

@@ -9,7 +9,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiDescribedFormGroup, EuiSwitch, EuiTextColor, EuiFormRow } from '@elastic/eui';
 
 import { DeletePhase as DeletePhaseInterface, Phases } from '../../../services/policies/types';
-import { PhaseValidationErrors, propertyof } from '../../../services/policies/policy_validation';
+import { PhaseValidationErrors } from '../../../services/policies/policy_validation';
 
 import {
   ActiveBadge,
@@ -20,9 +20,8 @@ import {
   SnapshotPolicies,
 } from '../components';
 
-const deleteProperty = propertyof<Phases>('delete');
-const phaseProperty = (propertyName: keyof DeletePhaseInterface) =>
-  propertyof<DeletePhaseInterface>(propertyName);
+const deleteProperty: keyof Phases = 'delete';
+const phaseProperty = (propertyName: keyof DeletePhaseInterface) => propertyName;
 
 interface Props {
   setPhaseData: (key: keyof DeletePhaseInterface & string, value: string | boolean) => void;