Skip to content

Commit

Permalink
scrolling to first error when user submits form for edit policy
Browse files Browse the repository at this point in the history
  • Loading branch information
@bmcconaghy
bmcconaghy committed Nov 5, 2018
1 parent 8fe278c commit 008d37c
Show file tree
Hide file tree
Showing 7 changed files with 61 additions and 26 deletions.
23 changes: 15 additions & 8 deletions x-pack/plugins/index_lifecycle_management/public/lib/find_errors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,26 @@
* you may not use this file except in compliance with the Elastic License.
*/

export const hasErrors = (object, keysToIgnore = []) => {
let errors = false;
for (const [key, value] of Object.entries(object)) {
if (keysToIgnore.includes(key)) continue;
export const findFirstError = (object, topLevel = true) => {
console.log("ERRORS", object);

let firstError;
const keys = topLevel ? [ 'policyName', 'hot', 'warm', 'cold', 'delete'] : Object.keys(object);
for (const key of keys) {
const value = object[key];
if (Array.isArray(value) && value.length > 0) {
errors = true;
firstError = key;
console.log(`Found error ${firstError}`);
break;
} else if (value) {
errors = hasErrors(value, keysToIgnore);
if (errors) {
firstError = findFirstError(value, false);
if (firstError) {
firstError = `${key}.${firstError}`;
console.log(`Found error ${firstError}`);
break;
}
}
}
return errors;
console.log(`Returning ${firstError}`);
return firstError;
};
4 changes: 4 additions & 0 deletions ...ndex_lifecycle_management/public/sections/edit_policy/components/cold_phase/cold_phase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
EuiButton,
} from '@elastic/eui';
import {
PHASE_COLD,
PHASE_ENABLED,
PHASE_ROLLOVER_ALIAS,
PHASE_ROLLOVER_MINIMUM_AGE,
Expand Down Expand Up @@ -118,6 +119,7 @@ export class ColdPhase extends PureComponent {
<EuiFlexGroup>
<EuiFlexItem style={{ maxWidth: 188 }}>
<ErrableFormRow
id={`${PHASE_COLD}.${PHASE_ROLLOVER_MINIMUM_AGE}`}
label="Move to cold phase after"
errorKey={PHASE_ROLLOVER_MINIMUM_AGE}
isShowingErrors={isShowingErrors}
Expand Down Expand Up @@ -151,6 +153,7 @@ export class ColdPhase extends PureComponent {
<EuiSpacer />

<ErrableFormRow
id={`${PHASE_COLD}.${PHASE_NODE_ATTRS}`}
label="Choose where to allocate indices by node attribute"
errorKey={PHASE_NODE_ATTRS}
isShowingErrors={isShowingErrors}
Expand All @@ -177,6 +180,7 @@ export class ColdPhase extends PureComponent {
<EuiFlexGroup>
<EuiFlexItem grow={false} style={{ maxWidth: 188 }}>
<ErrableFormRow
id={`${PHASE_COLD}.${PHASE_REPLICA_COUNT}`}
label="Number of replicas"
errorKey={PHASE_REPLICA_COUNT}
isShowingErrors={isShowingErrors}
Expand Down
2 changes: 2 additions & 0 deletions ..._lifecycle_management/public/sections/edit_policy/components/delete_phase/delete_phase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
EuiButton,
} from '@elastic/eui';
import {
PHASE_DELETE,
PHASE_ENABLED,
PHASE_ROLLOVER_MINIMUM_AGE,
PHASE_ROLLOVER_MINIMUM_AGE_UNITS,
Expand Down Expand Up @@ -104,6 +105,7 @@ export class DeletePhase extends PureComponent {
<EuiFlexGroup>
<EuiFlexItem style={{ maxWidth: 188 }}>
<ErrableFormRow
id={`${PHASE_DELETE}.${PHASE_ROLLOVER_MINIMUM_AGE}`}
label="Delete indices after"
errorKey={PHASE_ROLLOVER_MINIMUM_AGE}
isShowingErrors={isShowingErrors}
Expand Down
7 changes: 6 additions & 1 deletion .../index_lifecycle_management/public/sections/edit_policy/components/hot_phase/hot_phase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
} from '@elastic/eui';
import { LearnMoreLink } from '../../../../components/learn_more_link';
import {
PHASE_HOT,
PHASE_ROLLOVER_ALIAS,
PHASE_ROLLOVER_MAX_AGE,
PHASE_ROLLOVER_MAX_AGE_UNITS,
Expand Down Expand Up @@ -113,6 +114,7 @@ export class HotPhase extends PureComponent {
<EuiFlexGroup>
<EuiFlexItem style={{ maxWidth: 188 }}>
<ErrableFormRow
id={`${PHASE_HOT}.${PHASE_ROLLOVER_MAX_SIZE_STORED}`}
label="Maximum index size"
errorKey={PHASE_ROLLOVER_MAX_SIZE_STORED}
isShowingErrors={isShowingErrors}
Expand All @@ -132,6 +134,7 @@ export class HotPhase extends PureComponent {
</EuiFlexItem>
<EuiFlexItem style={{ maxWidth: 188 }}>
<ErrableFormRow
id={`${PHASE_HOT}.${PHASE_ROLLOVER_MAX_SIZE_STORED_UNITS}`}
hasEmptyLabelSpace
errorKey={PHASE_ROLLOVER_MAX_SIZE_STORED_UNITS}
isShowingErrors={isShowingErrors}
Expand All @@ -157,8 +160,9 @@ export class HotPhase extends PureComponent {
<EuiFlexGroup>
<EuiFlexItem style={{ maxWidth: 188 }}>
<ErrableFormRow
id={`${PHASE_HOT}.${PHASE_ROLLOVER_MAX_AGE}`}
label="Maximum age"
errorKey={PHASE_ROLLOVER_MAX_AGE}
errorKey={`${PHASE_ROLLOVER_MAX_AGE}`}
isShowingErrors={isShowingErrors}
errors={errors}
>
Expand All @@ -173,6 +177,7 @@ export class HotPhase extends PureComponent {
</EuiFlexItem>
<EuiFlexItem style={{ maxWidth: 188 }}>
<ErrableFormRow
id={`${PHASE_HOT}.${PHASE_ROLLOVER_MAX_AGE_UNITS}`}
hasEmptyLabelSpace
errorKey={PHASE_ROLLOVER_MAX_AGE_UNITS}
isShowingErrors={isShowingErrors}
Expand Down
6 changes: 6 additions & 0 deletions ...ndex_lifecycle_management/public/sections/edit_policy/components/warm_phase/warm_phase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
EuiButton,
} from '@elastic/eui';
import {
PHASE_WARM,
PHASE_ENABLED,
WARM_PHASE_ON_ROLLOVER,
PHASE_ROLLOVER_ALIAS,
Expand Down Expand Up @@ -135,6 +136,7 @@ export class WarmPhase extends PureComponent {
<EuiFlexGroup>
<EuiFlexItem style={{ maxWidth: 188 }}>
<ErrableFormRow
id={`${PHASE_WARM}.${PHASE_ROLLOVER_MINIMUM_AGE}`}
label="Move to warm phase after"
errorKey={PHASE_ROLLOVER_MINIMUM_AGE}
isShowingErrors={isShowingErrors}
Expand Down Expand Up @@ -169,6 +171,7 @@ export class WarmPhase extends PureComponent {
<EuiSpacer />

<ErrableFormRow
id={`${PHASE_WARM}.${PHASE_NODE_ATTRS}`}
label="Choose where to allocate indices by node attribute"
errorKey={PHASE_NODE_ATTRS}
isShowingErrors={isShowingErrors}
Expand Down Expand Up @@ -196,6 +199,7 @@ export class WarmPhase extends PureComponent {
<EuiFlexGroup>
<EuiFlexItem grow={false} style={{ maxWidth: 188 }}>
<ErrableFormRow
id={`${PHASE_WARM}.${PHASE_REPLICA_COUNT}`}
label="Number of replicas"
errorKey={PHASE_REPLICA_COUNT}
isShowingErrors={isShowingErrors}
Expand Down Expand Up @@ -240,6 +244,7 @@ export class WarmPhase extends PureComponent {
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<ErrableFormRow
id={`${PHASE_WARM}.${PHASE_PRIMARY_SHARD_COUNT}`}
label="Number of primary shards"
errorKey={PHASE_PRIMARY_SHARD_COUNT}
isShowingErrors={isShowingErrors}
Expand Down Expand Up @@ -284,6 +289,7 @@ export class WarmPhase extends PureComponent {

{phaseData[PHASE_FORCE_MERGE_ENABLED] ? (
<ErrableFormRow
id={`${PHASE_WARM}.${PHASE_FORCE_MERGE_SEGMENTS}`}
label="Number of segments"
errorKey={PHASE_FORCE_MERGE_SEGMENTS}
isShowingErrors={isShowingErrors}
Expand Down
26 changes: 16 additions & 10 deletions ...k/plugins/index_lifecycle_management/public/sections/edit_policy/edit_policy.container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,24 @@ import {
saveLifecyclePolicy,
fetchPolicies,
} from '../../store/actions';
import { findFirstError } from '../../lib/find_errors';

export const EditPolicy = connect(
state => ({
errors: validateLifecycle(state),
selectedPolicy: getSelectedPolicy(state),
affectedIndexTemplates: getAffectedIndexTemplates(state),
saveAsNewPolicy: getSaveAsNewPolicy(state),
lifecycle: getLifecycle(state),
policies: getPolicies(state),
isPolicyListLoaded: isPolicyListLoaded(state),
isNewPolicy: getIsNewPolicy(state),
}),
state => {
const errors = validateLifecycle(state);
const firstError = findFirstError(errors);
return {
firstError,
errors,
selectedPolicy: getSelectedPolicy(state),
affectedIndexTemplates: getAffectedIndexTemplates(state),
saveAsNewPolicy: getSaveAsNewPolicy(state),
lifecycle: getLifecycle(state),
policies: getPolicies(state),
isPolicyListLoaded: isPolicyListLoaded(state),
isNewPolicy: getIsNewPolicy(state),
};
},
{
setSelectedPolicy,
setSelectedPolicyName,
Expand Down
19 changes: 12 additions & 7 deletions x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/edit_policy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import {
PHASE_WARM,
STRUCTURE_POLICY_NAME,
} from '../../store/constants';
import { hasErrors } from '../../lib/find_errors';
import { findFirstError } from '../../lib/find_errors';
import { NodeAttrsDetails } from './components/node_attrs_details';
import { ErrableFormRow } from './form_errors';

Expand Down Expand Up @@ -87,13 +87,17 @@ export class EditPolicy extends Component {
submit = async () => {
this.setState({ isShowingErrors: true });
const {
errors,
saveLifecyclePolicy,
lifecycle,
saveAsNewPolicy,
firstError
} = this.props;
if (hasErrors(errors)) {
if (firstError) {
toastNotifications.addDanger('Please the fix errors on the page');
const element = document.getElementById(`${firstError}-row`);
if (element) {
element.scrollIntoView();
}
} else {
const success = await saveLifecyclePolicy(lifecycle, saveAsNewPolicy);
if (success) {
Expand Down Expand Up @@ -176,6 +180,7 @@ export class EditPolicy extends Component {
{saveAsNewPolicy || !policyName ? (
<Fragment>
<ErrableFormRow
id={STRUCTURE_POLICY_NAME}
label="Policy name"
errorKey={STRUCTURE_POLICY_NAME}
isShowingErrors={isShowingErrors}
Expand All @@ -195,24 +200,24 @@ export class EditPolicy extends Component {
<HotPhase
selectedPolicy={selectedPolicy}
errors={errors[PHASE_HOT]}
isShowingErrors={isShowingErrors && hasErrors(errors[PHASE_HOT])}
isShowingErrors={isShowingErrors && findFirstError(errors[PHASE_HOT], false)}
/>
<EuiHorizontalRule className="ilmHrule" />
<WarmPhase
errors={errors[PHASE_WARM]}
showNodeDetailsFlyout={this.showNodeDetailsFlyout}
isShowingErrors={isShowingErrors && hasErrors(errors[PHASE_WARM])}
isShowingErrors={isShowingErrors && findFirstError(errors[PHASE_WARM], false)}
/>
<EuiHorizontalRule className="ilmHrule" />
<ColdPhase
errors={errors[PHASE_COLD]}
showNodeDetailsFlyout={this.showNodeDetailsFlyout}
isShowingErrors={isShowingErrors && hasErrors(errors[PHASE_COLD])}
isShowingErrors={isShowingErrors && findFirstError(errors[PHASE_COLD], false)}
/>
<EuiHorizontalRule className="ilmHrule" />
<DeletePhase
errors={errors[PHASE_DELETE]}
isShowingErrors={isShowingErrors && hasErrors(errors[PHASE_DELETE])}
isShowingErrors={isShowingErrors && findFirstError(errors[PHASE_DELETE], false)}
/>
<EuiHorizontalRule className="ilmHrule" />
<EuiButtonEmpty onClick={this.backToPolicyList}>
Expand Down

0 comments on commit 008d37c

Please sign in to comment.