From 7b0da505c2bfa04b5bc0bba5e12541867e1a8823 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Tue, 16 Mar 2021 16:19:12 +0100 Subject: [PATCH] address some PR feedback, including fixing the URL navigation behaviour --- .../phases/cold_phase/cold_phase.tsx | 9 ++----- .../rollup_wizard/rollup_wizard.container.tsx | 1 + .../rollup_wizard/rollup_wizard.tsx | 1 + .../field_chooser/field_chooser.tsx | 4 +-- .../steps/components/field_chooser/types.ts | 2 +- .../rollup_wizard/steps_config/index.js | 2 -- .../edit_policy/edit_policy.container.tsx | 2 +- .../sections/edit_policy/edit_policy.tsx | 18 +++---------- .../form/configuration_issues_context.tsx | 26 +++++++++++++++---- .../navigation/navigation_context.tsx | 21 +++++++++------ 10 files changed, 46 insertions(+), 40 deletions(-) diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/cold_phase/cold_phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/cold_phase/cold_phase.tsx index 99e6984476f84..e2b643b99e3cf 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/cold_phase/cold_phase.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/cold_phase/cold_phase.tsx @@ -30,10 +30,7 @@ const i18nTexts = { }; export const ColdPhase: FunctionComponent = () => { - const { - isUsingSearchableSnapshotInHotPhase, - isUsingSearchableSnapshotInColdPhase, - } = useConfigurationIssues(); + const { isUsingSearchableSnapshotInHotPhase, canUseRollupInColdPhase } = useConfigurationIssues(); return ( }> @@ -48,9 +45,7 @@ export const ColdPhase: FunctionComponent = () => { phase="cold" /> - {!isUsingSearchableSnapshotInColdPhase && !isUsingSearchableSnapshotInHotPhase && ( - - )} + {canUseRollupInColdPhase && } diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/rollup_wizard/rollup_wizard.container.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/rollup_wizard/rollup_wizard.container.tsx index a9f4320e4f17e..c8fbe1b0aa5a9 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/rollup_wizard/rollup_wizard.container.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/rollup_wizard/rollup_wizard.container.tsx @@ -9,6 +9,7 @@ import React, { FunctionComponent } from 'react'; import { get } from 'lodash'; import { useFormData, FormHook } from '../../../../../shared_imports'; + import { RollupWizard as RollupWizardView, Props as RollupWizardViewProps } from './rollup_wizard'; import { FieldChooserProvider } from './field_chooser_context'; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/rollup_wizard/rollup_wizard.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/rollup_wizard/rollup_wizard.tsx index 8380d885d2ef8..302704f46704a 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/rollup_wizard/rollup_wizard.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/rollup_wizard/rollup_wizard.tsx @@ -132,6 +132,7 @@ const deriveStepFields = (value: RollupAction['config'] | undefined): StepFields ); }; +// TODO: This component should be migrated to use the ES UI generic FormWizard component that takes care functionality for navigating to steps. export class RollupWizard extends Component { lastIndexPatternValidationTime: number; // @ts-ignore diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/rollup_wizard/steps/components/field_chooser/field_chooser.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/rollup_wizard/steps/components/field_chooser/field_chooser.tsx index 3492ce37960da..f1d116f729eb2 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/rollup_wizard/steps/components/field_chooser/field_chooser.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/rollup_wizard/steps/components/field_chooser/field_chooser.tsx @@ -330,7 +330,7 @@ export class FieldChooser extends Component { return (
- path="field" + path="fieldName" form={customFieldForm} component={TextField} config={{ @@ -389,7 +389,7 @@ export class FieldChooser extends Component { return; } customFieldForm.reset(); - onSelectField({ name: data.field }); + onSelectField({ name: data.fieldName }); }} > {i18n.translate( diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/rollup_wizard/steps/components/field_chooser/types.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/rollup_wizard/steps/components/field_chooser/types.ts index c304100303213..4e7717c822292 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/rollup_wizard/steps/components/field_chooser/types.ts +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/rollup_wizard/steps/components/field_chooser/types.ts @@ -6,5 +6,5 @@ */ export interface CustomFieldForm { - field: string; + fieldName: string; } diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/rollup_wizard/steps_config/index.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/rollup_wizard/steps_config/index.js index d6760113200f4..bc209c8191d62 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/rollup_wizard/steps_config/index.js +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/rollup_wizard/steps_config/index.js @@ -24,8 +24,6 @@ export const stepIds = [STEP_DATE_HISTOGRAM, STEP_TERMS, STEP_HISTOGRAM, STEP_ME * Map a specific wizard step to two functions: * 1. getDefaultFields: (overrides) => object * 2. fieldValidations - * - * See rollup/public/crud_app/services/jobs.js for more information on override's shape */ export const stepIdToStepConfigMap = { [STEP_DATE_HISTOGRAM]: { diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.container.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.container.tsx index 4759004a16fad..32b3be9b67797 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.container.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.container.tsx @@ -90,7 +90,7 @@ export const EditPolicy: React.FunctionComponent = ({ history }) => { window.scrollTo(0, 0); }, []); - const currentViewPhase = currentView.id === 'rollupAction' ? currentView.phase : undefined; - const currentRollupField = form.getFields()[`phases.${currentViewPhase}.actions.rollup.config`]; - const hasCurrentRollupField = Boolean(currentRollupField); - - useEffect(() => { - if (!hasCurrentRollupField) { - goToPolicyView(); - } - }, [hasCurrentRollupField, goToPolicyView]); - return ( @@ -351,7 +341,7 @@ export const EditPolicy: React.FunctionComponent = ({ history }) => { ) : null} - {currentView.id === 'rollupAction' && hasCurrentRollupField && ( + {currentView.id === 'rollupAction' && ( = ({ history }) => { }} onDone={(rollupAction) => { const { phase } = currentView; - const fieldPath = `phases.${phase}.actions.rollup.config`; - const rollupField = form.getFields()[fieldPath]; + const rollupConfigPath = `phases.${phase}.actions.rollup.config`; + const rollupField = form.getFields()[rollupConfigPath]; const newCurrentPolicy = cloneDeep({ ...currentPolicy, name: originalPolicyName, }); - set(newCurrentPolicy, fieldPath, rollupAction); + set(newCurrentPolicy, rollupConfigPath, rollupAction); setCurrentPolicy(newCurrentPolicy); rollupField.setValue(rollupAction); diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/configuration_issues_context.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/configuration_issues_context.tsx index fae017a20b26b..7e3621c4df4ff 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/configuration_issues_context.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/configuration_issues_context.tsx @@ -6,12 +6,14 @@ */ import { get } from 'lodash'; -import React, { FunctionComponent, createContext, useContext } from 'react'; +import React, { FunctionComponent, createContext, useContext, useEffect } from 'react'; import { useFormData } from '../../../../shared_imports'; import { isUsingDefaultRolloverPath, isUsingCustomRolloverPath } from '../constants'; +import { useNavigationContext } from '../navigation'; + export interface ConfigurationIssues { /** * Whether the serialized policy will use rollover. This blocks certain actions in @@ -26,6 +28,8 @@ export interface ConfigurationIssues { */ isUsingSearchableSnapshotInHotPhase: boolean; isUsingSearchableSnapshotInColdPhase: boolean; + + canUseRollupInColdPhase: boolean; } const ConfigurationIssuesContext = createContext(null as any); @@ -37,6 +41,7 @@ const pathToColdPhaseSearchableSnapshot = 'phases.cold.actions.searchable_snapshot.snapshot_repository'; export const ConfigurationIssuesProvider: FunctionComponent = ({ children }) => { + const { setIsColdRollupActionBlocked } = useNavigationContext(); const [formData] = useFormData({ watch: [ pathToHotPhaseSearchableSnapshot, @@ -49,14 +54,25 @@ export const ConfigurationIssuesProvider: FunctionComponent = ({ children }) => // Provide default value, as path may become undefined if removed from the DOM const isUsingCustomRollover = get(formData, isUsingCustomRolloverPath, true); + const isUsingSearchableSnapshotInHotPhase = + get(formData, pathToHotPhaseSearchableSnapshot) != null; + const isUsingSearchableSnapshotInColdPhase = + get(formData, pathToColdPhaseSearchableSnapshot) != null; + + const canUseRollupInColdPhase = + !isUsingSearchableSnapshotInHotPhase && !isUsingSearchableSnapshotInColdPhase; + + useEffect(() => { + setIsColdRollupActionBlocked(!canUseRollupInColdPhase); + }, [setIsColdRollupActionBlocked, canUseRollupInColdPhase]); + return ( {children} diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/navigation/navigation_context.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/navigation/navigation_context.tsx index 40f4982d9e79b..496c6442a7aca 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/navigation/navigation_context.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/navigation/navigation_context.tsx @@ -8,6 +8,7 @@ import React, { FunctionComponent, createContext, + useState, useContext, useMemo, useEffect, @@ -27,16 +28,16 @@ export type PolicyView = { id: 'policy' } | { id: 'rollupAction'; phase: 'hot' | interface ContextValue { currentView: PolicyView; goToPolicyView: (scrollToFieldWithId?: string) => void; + setIsColdRollupActionBlocked: (value: boolean) => void; } -const NavigationContext = createContext({ - currentView: { id: 'policy' }, - goToPolicyView: () => {}, -}); +const NavigationContext = createContext(null); export const NavigationContextProvider: FunctionComponent = ({ children }) => { const { policyName } = useEditPolicyContext(); + const [isColdRollupActionBlocked, setIsColdRollupActionBlocked] = useState(true); + const { search } = useLocation(); const history = useHistory(); @@ -45,12 +46,14 @@ export const NavigationContextProvider: FunctionComponent = ({ children }) => { } = useKibana(); const currentView = useMemo(() => { - const { rollup } = qs.parse(search) as { rollup: 'hot' | 'cold' }; - if (rollup) { + const { rollup } = qs.parse(search) as { rollup?: 'hot' | 'cold' }; + const rollupBlocked = rollup === 'cold' && isColdRollupActionBlocked; + if (rollup && !rollupBlocked) { return { id: 'rollupAction', phase: rollup }; } + return { id: 'policy' }; - }, [search]); + }, [search, isColdRollupActionBlocked]); const { id: currentViewId } = currentView; @@ -83,7 +86,9 @@ export const NavigationContextProvider: FunctionComponent = ({ children }) => { }, [breadcrumbService, search, currentViewId, policyName]); return ( - + {children} );