From 64b8b88c649506a465d775b56cb2e16b7e217c0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yulia=20=C4=8Cech?= <6585477+yuliacech@users.noreply.github.com> Date: Fri, 14 Aug 2020 23:12:01 +0200 Subject: [PATCH] [ILM] TS conversion of Edit policy components (#74747) * [ILM] Convert node allocation component to TS and use hooks * [ILM] Fix jest tests * [ILM] Fix i18n check * [ILM] Implement code review suggestions * [ILM] Fix type check, docs link and button maxWidth in NodeAllocation component * Fix internaliation error * [ILM] Convert node details flyout to TS * [ILM] Fix useState declaration * [ILM] Fix useState declaration * [ILM] Fix jest test * [ILM] Change error message when unable to load node attributes * [ILM] Change error message when unable to load node details * [ILM] Delete a period in error callout * [ILM] Delete a period in error callout * [ILM] Convert node details flyout to TS * [ILM] Fix i18n check * [ILM] Fix useState declaration * [ILM] Fix useState declaration * [ILM] Fix jest test * [ILM] Change error message when unable to load node details * [ILM] Delete a period in error callout * [ILM] edit components * [ILM] Fix review suggestions Co-authored-by: Elastic Machine --- .../components/active_badge.tsx} | 0 .../cold_phase/cold_phase.container.js | 22 ----- .../components/cold_phase/index.js | 7 -- .../delete_phase/delete_phase.container.js | 21 ---- .../components/delete_phase/index.js | 7 -- .../{ => components}/form_errors.tsx | 0 .../hot_phase/hot_phase.container.js | 22 ----- .../edit_policy/components/hot_phase/index.js | 7 -- .../components/index.ts} | 9 +- .../components/learn_more_link.tsx | 2 +- .../{min_age_input.js => min_age_input.tsx} | 27 +++-- .../{node_allocation => }/node_allocation.tsx | 15 +-- .../node_attrs_details.tsx | 2 +- .../components/node_attrs_details/index.ts | 7 -- .../components/optional_label.tsx} | 0 .../components/phase_error_message.tsx} | 2 +- .../components/policy_json_flyout.js | 95 ------------------ .../components/policy_json_flyout.tsx | 98 +++++++++++++++++++ ...iority_input.js => set_priority_input.tsx} | 22 ++++- .../snapshot_policies.tsx | 2 +- .../components/snapshot_policies/index.ts | 7 -- .../components/warm_phase/index.js | 7 -- .../warm_phase/warm_phase.container.js | 22 ----- .../edit_policy/edit_policy.container.js | 4 + .../sections/edit_policy/edit_policy.js | 29 ++++-- .../cold_phase.js => phases/cold_phase.tsx} | 32 +++--- .../delete_phase.tsx} | 38 ++++--- .../hot_phase.js => phases/hot_phase.tsx} | 27 ++--- .../node_allocation => phases}/index.ts | 5 +- .../warm_phase.js => phases/warm_phase.tsx} | 34 ++++--- .../add_policy_to_template_confirm_modal.js | 2 +- .../public/application/store/actions/nodes.js | 3 - 32 files changed, 267 insertions(+), 310 deletions(-) rename x-pack/plugins/index_lifecycle_management/public/application/sections/{components/active_badge.js => edit_policy/components/active_badge.tsx} (100%) delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/cold_phase/cold_phase.container.js delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/cold_phase/index.js delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/delete_phase/delete_phase.container.js delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/delete_phase/index.js rename x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/{ => components}/form_errors.tsx (100%) delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/hot_phase/hot_phase.container.js delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/hot_phase/index.js rename x-pack/plugins/index_lifecycle_management/public/application/sections/{components/index.js => edit_policy/components/index.ts} (54%) rename x-pack/plugins/index_lifecycle_management/public/application/sections/{ => edit_policy}/components/learn_more_link.tsx (92%) rename x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/{min_age_input.js => min_age_input.tsx} (91%) rename x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/{node_allocation => }/node_allocation.tsx (93%) rename x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/{node_attrs_details => }/node_attrs_details.tsx (97%) delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_attrs_details/index.ts rename x-pack/plugins/index_lifecycle_management/public/application/sections/{components/optional_label.js => edit_policy/components/optional_label.tsx} (100%) rename x-pack/plugins/index_lifecycle_management/public/application/sections/{components/phase_error_message.js => edit_policy/components/phase_error_message.tsx} (87%) delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/policy_json_flyout.js create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/policy_json_flyout.tsx rename x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/{set_priority_input.js => set_priority_input.tsx} (80%) rename x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/{snapshot_policies => }/snapshot_policies.tsx (98%) delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/snapshot_policies/index.ts delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/warm_phase/index.js delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/warm_phase/warm_phase.container.js rename x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/{components/cold_phase/cold_phase.js => phases/cold_phase.tsx} (92%) rename x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/{components/delete_phase/delete_phase.js => phases/delete_phase.tsx} (88%) rename x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/{components/hot_phase/hot_phase.js => phases/hot_phase.tsx} (96%) rename x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/{components/node_allocation => phases}/index.ts (58%) rename x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/{components/warm_phase/warm_phase.js => phases/warm_phase.tsx} (95%) diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/components/active_badge.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/active_badge.tsx similarity index 100% rename from x-pack/plugins/index_lifecycle_management/public/application/sections/components/active_badge.js rename to x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/active_badge.tsx diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/cold_phase/cold_phase.container.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/cold_phase/cold_phase.container.js deleted file mode 100644 index d4605ceb43499..0000000000000 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/cold_phase/cold_phase.container.js +++ /dev/null @@ -1,22 +0,0 @@ -/* - * 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 { connect } from 'react-redux'; - -import { getPhase } from '../../../../store/selectors'; -import { setPhaseData } from '../../../../store/actions'; -import { PHASE_COLD, PHASE_HOT, PHASE_ROLLOVER_ENABLED } from '../../../../constants'; -import { ColdPhase as PresentationComponent } from './cold_phase'; - -export const ColdPhase = connect( - (state) => ({ - phaseData: getPhase(state, PHASE_COLD), - hotPhaseRolloverEnabled: getPhase(state, PHASE_HOT)[PHASE_ROLLOVER_ENABLED], - }), - { - setPhaseData: (key, value) => setPhaseData(PHASE_COLD, key, value), - } -)(PresentationComponent); diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/cold_phase/index.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/cold_phase/index.js deleted file mode 100644 index e0d70ceb57726..0000000000000 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/cold_phase/index.js +++ /dev/null @@ -1,7 +0,0 @@ -/* - * 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 { ColdPhase } from './cold_phase.container'; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/delete_phase/delete_phase.container.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/delete_phase/delete_phase.container.js deleted file mode 100644 index 84bd17e3637e8..0000000000000 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/delete_phase/delete_phase.container.js +++ /dev/null @@ -1,21 +0,0 @@ -/* - * 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 { connect } from 'react-redux'; -import { getPhase } from '../../../../store/selectors'; -import { setPhaseData } from '../../../../store/actions'; -import { PHASE_DELETE, PHASE_HOT, PHASE_ROLLOVER_ENABLED } from '../../../../constants'; -import { DeletePhase as PresentationComponent } from './delete_phase'; - -export const DeletePhase = connect( - (state) => ({ - phaseData: getPhase(state, PHASE_DELETE), - hotPhaseRolloverEnabled: getPhase(state, PHASE_HOT)[PHASE_ROLLOVER_ENABLED], - }), - { - setPhaseData: (key, value) => setPhaseData(PHASE_DELETE, key, value), - } -)(PresentationComponent); diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/delete_phase/index.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/delete_phase/index.js deleted file mode 100644 index 5f909ab2c0f79..0000000000000 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/delete_phase/index.js +++ /dev/null @@ -1,7 +0,0 @@ -/* - * 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 { DeletePhase } from './delete_phase.container'; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form_errors.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/form_errors.tsx similarity index 100% rename from x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form_errors.tsx rename to x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/form_errors.tsx diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/hot_phase/hot_phase.container.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/hot_phase/hot_phase.container.js deleted file mode 100644 index 5f1451afdcc31..0000000000000 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/hot_phase/hot_phase.container.js +++ /dev/null @@ -1,22 +0,0 @@ -/* - * 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 { connect } from 'react-redux'; - -import { getPhase } from '../../../../store/selectors'; -import { setPhaseData } from '../../../../store/actions'; -import { PHASE_HOT, PHASE_WARM, WARM_PHASE_ON_ROLLOVER } from '../../../../constants'; -import { HotPhase as PresentationComponent } from './hot_phase'; - -export const HotPhase = connect( - (state) => ({ - phaseData: getPhase(state, PHASE_HOT), - }), - { - setPhaseData: (key, value) => setPhaseData(PHASE_HOT, key, value), - setWarmPhaseOnRollover: (value) => setPhaseData(PHASE_WARM, WARM_PHASE_ON_ROLLOVER, value), - } -)(PresentationComponent); diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/hot_phase/index.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/hot_phase/index.js deleted file mode 100644 index 114e34c3ef4d0..0000000000000 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/hot_phase/index.js +++ /dev/null @@ -1,7 +0,0 @@ -/* - * 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 { HotPhase } from './hot_phase.container'; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/components/index.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/index.ts similarity index 54% rename from x-pack/plugins/index_lifecycle_management/public/application/sections/components/index.js rename to x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/index.ts index a2ae37780b9f9..e933c46e98491 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/components/index.js +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/index.ts @@ -5,6 +5,13 @@ */ export { ActiveBadge } from './active_badge'; +export { ErrableFormRow } from './form_errors'; export { LearnMoreLink } from './learn_more_link'; -export { PhaseErrorMessage } from './phase_error_message'; +export { MinAgeInput } from './min_age_input'; +export { NodeAllocation } from './node_allocation'; +export { NodeAttrsDetails } from './node_attrs_details'; export { OptionalLabel } from './optional_label'; +export { PhaseErrorMessage } from './phase_error_message'; +export { PolicyJsonFlyout } from './policy_json_flyout'; +export { SetPriorityInput } from './set_priority_input'; +export { SnapshotPolicies } from './snapshot_policies'; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/components/learn_more_link.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/learn_more_link.tsx similarity index 92% rename from x-pack/plugins/index_lifecycle_management/public/application/sections/components/learn_more_link.tsx rename to x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/learn_more_link.tsx index 623ff982438d7..5ada49b318018 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/components/learn_more_link.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/learn_more_link.tsx @@ -8,7 +8,7 @@ import React, { ReactNode } from 'react'; import { EuiLink } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; -import { createDocLink } from '../../services/documentation'; +import { createDocLink } from '../../../services/documentation'; interface Props { docPath: string; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/min_age_input.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/min_age_input.tsx similarity index 91% rename from x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/min_age_input.js rename to x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/min_age_input.tsx index d90ad9378efd4..c9732f2311758 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/min_age_input.js +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/min_age_input.tsx @@ -16,10 +16,10 @@ import { PHASE_COLD, PHASE_DELETE, } from '../../../constants'; -import { LearnMoreLink } from '../../components'; -import { ErrableFormRow } from '../form_errors'; +import { LearnMoreLink } from './learn_more_link'; +import { ErrableFormRow } from './form_errors'; -function getTimingLabelForPhase(phase) { +function getTimingLabelForPhase(phase: string) { // NOTE: Hot phase isn't necessary, because indices begin in the hot phase. switch (phase) { case PHASE_WARM: @@ -39,7 +39,7 @@ function getTimingLabelForPhase(phase) { } } -function getUnitsAriaLabelForPhase(phase) { +function getUnitsAriaLabelForPhase(phase: string) { // NOTE: Hot phase isn't necessary, because indices begin in the hot phase. switch (phase) { case PHASE_WARM: @@ -68,9 +68,24 @@ function getUnitsAriaLabelForPhase(phase) { } } -export const MinAgeInput = (props) => { - const { rolloverEnabled, errors, phaseData, phase, setPhaseData, isShowingErrors } = props; +interface Props { + rolloverEnabled: boolean; + errors: Record; + phase: string; + // TODO add types for phaseData and setPhaseData after policy is typed + phaseData: any; + setPhaseData: (dataKey: string, value: any) => void; + isShowingErrors: boolean; +} +export const MinAgeInput: React.FunctionComponent = ({ + rolloverEnabled, + errors, + phaseData, + phase, + setPhaseData, + isShowingErrors, +}) => { let daysOptionLabel; let hoursOptionLabel; let minutesOptionLabel; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation/node_allocation.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation.tsx similarity index 93% rename from x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation/node_allocation.tsx rename to x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation.tsx index 31261de45c743..576483a5ab9c2 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation/node_allocation.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation.tsx @@ -16,17 +16,18 @@ import { EuiButton, } from '@elastic/eui'; -import { PHASE_NODE_ATTRS } from '../../../../constants'; -import { LearnMoreLink } from '../../../components/learn_more_link'; -import { ErrableFormRow } from '../../form_errors'; -import { useLoadNodes } from '../../../../services/api'; -import { NodeAttrsDetails } from '../node_attrs_details'; +import { PHASE_NODE_ATTRS } from '../../../constants'; +import { LearnMoreLink } from './learn_more_link'; +import { ErrableFormRow } from './form_errors'; +import { useLoadNodes } from '../../../services/api'; +import { NodeAttrsDetails } from './node_attrs_details'; interface Props { phase: string; - setPhaseData: (dataKey: string, value: any) => void; - errors: any; + errors: Record; + // TODO add types for phaseData and setPhaseData after policy is typed phaseData: any; + setPhaseData: (dataKey: string, value: any) => void; isShowingErrors: boolean; } diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_attrs_details/node_attrs_details.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_attrs_details.tsx similarity index 97% rename from x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_attrs_details/node_attrs_details.tsx rename to x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_attrs_details.tsx index 6fcbd94dc5e9a..cd87cc324a414 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_attrs_details/node_attrs_details.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_attrs_details.tsx @@ -20,7 +20,7 @@ import { EuiButton, } from '@elastic/eui'; -import { useLoadNodeDetails } from '../../../../services/api'; +import { useLoadNodeDetails } from '../../../services/api'; interface Props { close: () => void; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_attrs_details/index.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_attrs_details/index.ts deleted file mode 100644 index 056d2f2f600f3..0000000000000 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_attrs_details/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -/* - * 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 { NodeAttrsDetails } from './node_attrs_details'; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/components/optional_label.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/optional_label.tsx similarity index 100% rename from x-pack/plugins/index_lifecycle_management/public/application/sections/components/optional_label.js rename to x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/optional_label.tsx diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/components/phase_error_message.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_error_message.tsx similarity index 87% rename from x-pack/plugins/index_lifecycle_management/public/application/sections/components/phase_error_message.js rename to x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_error_message.tsx index 904ac7c25f2f9..750f68543f221 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/components/phase_error_message.js +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_error_message.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { EuiBadge } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; -export const PhaseErrorMessage = ({ isShowingErrors }) => { +export const PhaseErrorMessage = ({ isShowingErrors }: { isShowingErrors: boolean }) => { return isShowingErrors ? ( '}`; - const request = `${endpoint}\n${this.getEsJson(lifecycle)}`; - - return ( - - - -

- {policyName ? ( - - ) : ( - - )} -

- - - - - -

- -

- - - - - - {request} - - - - - - - - - - ); - } -} diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/policy_json_flyout.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/policy_json_flyout.tsx new file mode 100644 index 0000000000000..aaf4aa6e6222d --- /dev/null +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/policy_json_flyout.tsx @@ -0,0 +1,98 @@ +/* + * 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 from 'react'; +import { FormattedMessage } from '@kbn/i18n/react'; + +import { + EuiButtonEmpty, + EuiCodeBlock, + EuiFlyout, + EuiFlyoutBody, + EuiFlyoutFooter, + EuiFlyoutHeader, + EuiSpacer, + EuiText, + EuiTitle, +} from '@elastic/eui'; + +interface Props { + close: () => void; + // TODO add types for lifecycle after policy is typed + lifecycle: any; + policyName: string; +} + +export const PolicyJsonFlyout: React.FunctionComponent = ({ + close, + lifecycle, + policyName, +}) => { + // @ts-ignore until store is typed + const getEsJson = ({ phases }) => { + return JSON.stringify( + { + policy: { + phases, + }, + }, + null, + 2 + ); + }; + + const endpoint = `PUT _ilm/policy/${policyName || ''}`; + const request = `${endpoint}\n${getEsJson(lifecycle)}`; + + return ( + + + +

+ {policyName ? ( + + ) : ( + + )} +

+ + + + + +

+ +

+ + + + + + {request} + + + + + + + + + + ); +}; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/set_priority_input.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/set_priority_input.tsx similarity index 80% rename from x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/set_priority_input.js rename to x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/set_priority_input.tsx index bdcc1e23b4230..0034de85fce17 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/set_priority_input.js +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/set_priority_input.tsx @@ -8,12 +8,26 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { EuiFieldNumber, EuiTextColor, EuiDescribedFormGroup } from '@elastic/eui'; import { PHASE_INDEX_PRIORITY } from '../../../constants'; -import { LearnMoreLink, OptionalLabel } from '../../components'; -import { ErrableFormRow } from '../form_errors'; -export const SetPriorityInput = (props) => { - const { errors, phaseData, phase, setPhaseData, isShowingErrors } = props; +import { LearnMoreLink } from './'; +import { OptionalLabel } from './'; +import { ErrableFormRow } from './'; +interface Props { + errors: Record; + // TODO add types for phaseData and setPhaseData after policy is typed + phase: string; + phaseData: any; + setPhaseData: (dataKey: string, value: any) => void; + isShowingErrors: boolean; +} +export const SetPriorityInput: React.FunctionComponent = ({ + errors, + phaseData, + phase, + setPhaseData, + isShowingErrors, +}) => { return ( ({ - phaseData: getPhase(state, PHASE_WARM), - hotPhaseRolloverEnabled: getPhase(state, PHASE_HOT)[PHASE_ROLLOVER_ENABLED], - }), - { - setPhaseData: (key, value) => setPhaseData(PHASE_WARM, key, value), - } -)(PresentationComponent); diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.container.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.container.js index 1c6ced8953211..e7f20a66d09f0 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.container.js +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.container.js @@ -15,6 +15,7 @@ import { isPolicyListLoaded, getIsNewPolicy, getSelectedOriginalPolicyName, + getPhases, } from '../../store/selectors'; import { @@ -23,6 +24,7 @@ import { setSaveAsNewPolicy, saveLifecyclePolicy, fetchPolicies, + setPhaseData, } from '../../store/actions'; import { findFirstError } from '../../services/find_errors'; @@ -42,6 +44,7 @@ export const EditPolicy = connect( isPolicyListLoaded: isPolicyListLoaded(state), isNewPolicy: getIsNewPolicy(state), originalPolicyName: getSelectedOriginalPolicyName(state), + phases: getPhases(state), }; }, { @@ -50,5 +53,6 @@ export const EditPolicy = connect( setSaveAsNewPolicy, saveLifecyclePolicy, fetchPolicies, + setPhaseData, } )(PresentationComponent); diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.js index d9d8866a2e2cc..a29ecd07c5e45 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.js +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.js @@ -33,17 +33,15 @@ import { PHASE_DELETE, PHASE_WARM, STRUCTURE_POLICY_NAME, + WARM_PHASE_ON_ROLLOVER, + PHASE_ROLLOVER_ENABLED, } from '../../constants'; import { toasts } from '../../services/notification'; import { findFirstError } from '../../services/find_errors'; -import { LearnMoreLink } from '../components'; -import { PolicyJsonFlyout } from './components/policy_json_flyout'; -import { ErrableFormRow } from './form_errors'; -import { HotPhase } from './components/hot_phase'; -import { WarmPhase } from './components/warm_phase'; -import { DeletePhase } from './components/delete_phase'; -import { ColdPhase } from './components/cold_phase'; +import { LearnMoreLink, PolicyJsonFlyout, ErrableFormRow } from './components'; + +import { HotPhase, WarmPhase, ColdPhase, DeletePhase } from './phases'; export class EditPolicy extends Component { static propTypes = { @@ -137,6 +135,8 @@ export class EditPolicy extends Component { isNewPolicy, lifecycle, originalPolicyName, + phases, + setPhaseData, } = this.props; const selectedPolicyName = selectedPolicy.name; const { isShowingErrors, isShowingPolicyJsonFlyout } = this.state; @@ -275,9 +275,13 @@ export class EditPolicy extends Component { setPhaseData(PHASE_HOT, key, value)} + phaseData={phases[PHASE_HOT]} + setWarmPhaseOnRollover={(value) => + setPhaseData(PHASE_WARM, WARM_PHASE_ON_ROLLOVER, value) + } /> @@ -285,6 +289,9 @@ export class EditPolicy extends Component { setPhaseData(PHASE_WARM, key, value)} + phaseData={phases[PHASE_WARM]} + hotPhaseRolloverEnabled={phases[PHASE_HOT][PHASE_ROLLOVER_ENABLED]} /> @@ -292,6 +299,9 @@ export class EditPolicy extends Component { setPhaseData(PHASE_COLD, key, value)} + phaseData={phases[PHASE_COLD]} + hotPhaseRolloverEnabled={phases[PHASE_HOT][PHASE_ROLLOVER_ENABLED]} /> @@ -300,6 +310,9 @@ export class EditPolicy extends Component { errors={errors[PHASE_DELETE]} isShowingErrors={isShowingErrors && !!findFirstError(errors[PHASE_DELETE], false)} getUrlForApp={this.props.getUrlForApp} + setPhaseData={(key, value) => setPhaseData(PHASE_DELETE, key, value)} + phaseData={phases[PHASE_DELETE]} + hotPhaseRolloverEnabled={phases[PHASE_HOT][PHASE_ROLLOVER_ENABLED]} /> diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/cold_phase/cold_phase.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/phases/cold_phase.tsx similarity index 92% rename from x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/cold_phase/cold_phase.js rename to x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/phases/cold_phase.tsx index 200bf0e767d9d..babbbf7638ebe 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/cold_phase/cold_phase.js +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/phases/cold_phase.tsx @@ -5,7 +5,6 @@ */ import React, { PureComponent, Fragment } from 'react'; -import PropTypes from 'prop-types'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; @@ -24,20 +23,27 @@ import { PHASE_ENABLED, PHASE_REPLICA_COUNT, PHASE_FREEZE_ENABLED, -} from '../../../../constants'; -import { LearnMoreLink, ActiveBadge, PhaseErrorMessage, OptionalLabel } from '../../../components'; -import { ErrableFormRow } from '../../form_errors'; -import { MinAgeInput } from '../min_age_input'; -import { NodeAllocation } from '../node_allocation'; -import { SetPriorityInput } from '../set_priority_input'; +} from '../../../constants'; +import { + LearnMoreLink, + ActiveBadge, + PhaseErrorMessage, + OptionalLabel, + ErrableFormRow, + MinAgeInput, + NodeAllocation, + SetPriorityInput, +} from '../components'; -export class ColdPhase extends PureComponent { - static propTypes = { - setPhaseData: PropTypes.func.isRequired, +interface Props { + setPhaseData: (key: string, value: any) => void; + phaseData: any; + isShowingErrors: boolean; + errors: Record; + hotPhaseRolloverEnabled: boolean; +} - isShowingErrors: PropTypes.bool.isRequired, - errors: PropTypes.object.isRequired, - }; +export class ColdPhase extends PureComponent { render() { const { setPhaseData, diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/delete_phase/delete_phase.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/phases/delete_phase.tsx similarity index 88% rename from x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/delete_phase/delete_phase.js rename to x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/phases/delete_phase.tsx index 2b12eec953e11..0143cc4af24e3 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/delete_phase/delete_phase.js +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/phases/delete_phase.tsx @@ -5,22 +5,35 @@ */ import React, { PureComponent, Fragment } from 'react'; -import PropTypes from 'prop-types'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiDescribedFormGroup, EuiSwitch, EuiTextColor, EuiFormRow } from '@elastic/eui'; -import { PHASE_DELETE, PHASE_ENABLED, PHASE_WAIT_FOR_SNAPSHOT_POLICY } from '../../../../constants'; -import { ActiveBadge, LearnMoreLink, OptionalLabel, PhaseErrorMessage } from '../../../components'; -import { MinAgeInput } from '../min_age_input'; -import { SnapshotPolicies } from '../snapshot_policies'; +import { PHASE_DELETE, PHASE_ENABLED, PHASE_WAIT_FOR_SNAPSHOT_POLICY } from '../../../constants'; +import { + ActiveBadge, + LearnMoreLink, + OptionalLabel, + PhaseErrorMessage, + MinAgeInput, + SnapshotPolicies, +} from '../components'; -export class DeletePhase extends PureComponent { - static propTypes = { - setPhaseData: PropTypes.func.isRequired, - isShowingErrors: PropTypes.bool.isRequired, - errors: PropTypes.object.isRequired, - }; +interface Props { + setPhaseData: (key: string, value: any) => void; + phaseData: any; + isShowingErrors: boolean; + errors: Record; + hotPhaseRolloverEnabled: boolean; + getUrlForApp: ( + appId: string, + options?: { + path?: string; + absolute?: boolean; + } + ) => string; +} +export class DeletePhase extends PureComponent { render() { const { setPhaseData, @@ -28,6 +41,7 @@ export class DeletePhase extends PureComponent { errors, isShowingErrors, hotPhaseRolloverEnabled, + getUrlForApp, } = this.props; return ( @@ -123,7 +137,7 @@ export class DeletePhase extends PureComponent { setPhaseData(PHASE_WAIT_FOR_SNAPSHOT_POLICY, value)} - getUrlForApp={this.props.getUrlForApp} + getUrlForApp={getUrlForApp} /> diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/hot_phase/hot_phase.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/phases/hot_phase.tsx similarity index 96% rename from x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/hot_phase/hot_phase.js rename to x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/phases/hot_phase.tsx index b420442198712..dbd48f3a85634 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/hot_phase/hot_phase.js +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/phases/hot_phase.tsx @@ -5,7 +5,6 @@ */ import React, { Fragment, PureComponent } from 'react'; -import PropTypes from 'prop-types'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; @@ -28,18 +27,24 @@ import { PHASE_ROLLOVER_MAX_SIZE_STORED, PHASE_ROLLOVER_MAX_SIZE_STORED_UNITS, PHASE_ROLLOVER_ENABLED, -} from '../../../../constants'; -import { LearnMoreLink, ActiveBadge, PhaseErrorMessage } from '../../../components'; -import { ErrableFormRow } from '../../form_errors'; -import { SetPriorityInput } from '../set_priority_input'; +} from '../../../constants'; +import { + LearnMoreLink, + ActiveBadge, + PhaseErrorMessage, + ErrableFormRow, + SetPriorityInput, +} from '../components'; -export class HotPhase extends PureComponent { - static propTypes = { - setPhaseData: PropTypes.func.isRequired, - isShowingErrors: PropTypes.bool.isRequired, - errors: PropTypes.object.isRequired, - }; +interface Props { + errors: Record; + isShowingErrors: boolean; + phaseData: any; + setPhaseData: (key: string, value: any) => void; + setWarmPhaseOnRollover: (value: boolean) => void; +} +export class HotPhase extends PureComponent { render() { const { setPhaseData, phaseData, isShowingErrors, errors, setWarmPhaseOnRollover } = this.props; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation/index.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/phases/index.ts similarity index 58% rename from x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation/index.ts rename to x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/phases/index.ts index 4675ab46ee501..8d1ace5950497 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation/index.ts +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/phases/index.ts @@ -4,4 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -export { NodeAllocation } from './node_allocation'; +export { HotPhase } from './hot_phase'; +export { WarmPhase } from './warm_phase'; +export { ColdPhase } from './cold_phase'; +export { DeletePhase } from './delete_phase'; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/warm_phase/warm_phase.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/phases/warm_phase.tsx similarity index 95% rename from x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/warm_phase/warm_phase.js rename to x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/phases/warm_phase.tsx index 60b5ab4781b6d..6ed81bf8f45d5 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/warm_phase/warm_phase.js +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/phases/warm_phase.tsx @@ -5,7 +5,6 @@ */ import React, { Fragment, PureComponent } from 'react'; -import PropTypes from 'prop-types'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; import { @@ -28,21 +27,26 @@ import { PHASE_PRIMARY_SHARD_COUNT, PHASE_REPLICA_COUNT, PHASE_SHRINK_ENABLED, -} from '../../../../constants'; -import { LearnMoreLink, ActiveBadge, PhaseErrorMessage, OptionalLabel } from '../../../components'; -import { ErrableFormRow } from '../../form_errors'; -import { SetPriorityInput } from '../set_priority_input'; -import { NodeAllocation } from '../node_allocation'; -import { MinAgeInput } from '../min_age_input'; - -export class WarmPhase extends PureComponent { - static propTypes = { - setPhaseData: PropTypes.func.isRequired, - - isShowingErrors: PropTypes.bool.isRequired, - errors: PropTypes.object.isRequired, - }; +} from '../../../constants'; +import { + LearnMoreLink, + ActiveBadge, + PhaseErrorMessage, + OptionalLabel, + ErrableFormRow, + SetPriorityInput, + NodeAllocation, + MinAgeInput, +} from '../components'; +interface Props { + setPhaseData: (key: string, value: any) => void; + phaseData: any; + isShowingErrors: boolean; + errors: Record; + hotPhaseRolloverEnabled: boolean; +} +export class WarmPhase extends PureComponent { render() { const { setPhaseData, diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/components/policy_table/add_policy_to_template_confirm_modal.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/components/policy_table/add_policy_to_template_confirm_modal.js index 8e53569047d8f..47134ad097720 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/components/policy_table/add_policy_to_template_confirm_modal.js +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/components/policy_table/add_policy_to_template_confirm_modal.js @@ -23,7 +23,7 @@ import { import { toasts } from '../../../../services/notification'; import { addLifecyclePolicyToTemplate, loadIndexTemplates } from '../../../../services/api'; import { showApiError } from '../../../../services/api_errors'; -import { LearnMoreLink } from '../../../components/learn_more_link'; +import { LearnMoreLink } from '../../../edit_policy/components'; export class AddPolicyToTemplateConfirmModal extends Component { state = { diff --git a/x-pack/plugins/index_lifecycle_management/public/application/store/actions/nodes.js b/x-pack/plugins/index_lifecycle_management/public/application/store/actions/nodes.js index 3f1c00db621a7..45a8e63f70e83 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/store/actions/nodes.js +++ b/x-pack/plugins/index_lifecycle_management/public/application/store/actions/nodes.js @@ -4,8 +4,5 @@ * you may not use this file except in compliance with the Elastic License. */ import { createAction } from 'redux-actions'; -import { SET_SELECTED_NODE_ATTRS } from '../../constants'; - -export const setSelectedNodeAttrs = createAction(SET_SELECTED_NODE_ATTRS); export const setSelectedPrimaryShardCount = createAction('SET_SELECTED_PRIMARY_SHARED_COUNT'); export const setSelectedReplicaCount = createAction('SET_SELECTED_REPLICA_COUNT');