github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

improving a11y for activating phases (#30101)

Browse source
This commit is contained in:
Bill McConaghy 2019-02-05 15:43:43 -05:00 • committed by GitHub
parent 5fea0c72c7
commit e36da1bc5a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 145 additions and 185 deletions
Download patch file Download diff file Expand all files Collapse all files

4
x-pack/plugins/index_lifecycle_management/__jest__/components/edit_policy.test.js
View file

@ -63,8 +63,8 @@ window.scrollTo = jest.fn();
window.TextEncoder = null;
let component;
const activatePhase = (rendered, phase) => {
const testSubject = `activatePhaseButton-${phase}`;
findTestSubject(rendered, testSubject).simulate('click');
const testSubject = `enablePhaseSwitch-${phase}`;
findTestSubject(rendered, testSubject).simulate('change', { target: { checked: true } });
rendered.update();
};
const expectedErrorMessages = (rendered, expectedErrorMessages) => {

45
x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/cold_phase/cold_phase.js
View file

@ -14,7 +14,6 @@ import {
EuiSpacer,
EuiFieldNumber,
EuiDescribedFormGroup,
EuiButton,
EuiSwitch,
EuiTextColor,
} from '@elastic/eui';
@ -66,7 +65,7 @@ class ColdPhaseUi extends PureComponent {
defaultMessage: 'Freeze index',
});
return (
<Fragment>
<div id="coldPhaseContent" aria-live="polite" role="region">
<EuiDescribedFormGroup
title={
<div>
@ -91,38 +90,26 @@ class ColdPhaseUi extends PureComponent {
Because your queries are slower, you can reduce the number of replicas."
/>
</p>
{phaseData[PHASE_ENABLED] ? (
<EuiButton
color="danger"
onClick={async () => {
await setPhaseData(PHASE_ENABLED, false);
}}
aria-controls="coldPhaseContent"
>
<EuiSwitch
data-test-subj="enablePhaseSwitch-cold"
label={
<FormattedMessage
id="xpack.indexLifecycleMgmt.editPolicy.coldhase.deactivateColdPhaseButton"
defaultMessage="Deactivate cold phase"
/>
</EuiButton>
) : (
<EuiButton
data-test-subj="activatePhaseButton-cold"
onClick={async () => {
await setPhaseData(PHASE_ENABLED, true);
}}
aria-controls="coldPhaseContent"
>
<FormattedMessage
id="xpack.indexLifecycleMgmt.editPolicy.coldPhase.activateColdPhaseButton"
id="xpack.indexLifecycleMgmt.editPolicy.coldPhase.activateWarmPhaseSwitchLabel"
defaultMessage="Activate cold phase"
/>
</EuiButton>
)}
}
id={`${PHASE_COLD}-${PHASE_ENABLED}`}
checked={phaseData[PHASE_ENABLED]}
onChange={async e => {
await setPhaseData(PHASE_ENABLED, e.target.checked);
}}
aria-controls="coldPhaseContent"
/>
</Fragment>
}
fullWidth
>
<div id="coldPhaseContent" aria-live="polite" role="region">
<Fragment>
{phaseData[PHASE_ENABLED] ? (
<Fragment>
<MinAgeInput
@ -181,7 +168,7 @@ class ColdPhaseUi extends PureComponent {
</Fragment>
) : <div />}
</div>
</Fragment>
</EuiDescribedFormGroup>
{phaseData[PHASE_ENABLED] ? (
<Fragment>
@ -226,7 +213,7 @@ class ColdPhaseUi extends PureComponent {
/>
</Fragment>
) : null }
</Fragment>
</div>
);
}
}

102
x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/delete_phase/delete_phase.js
View file

@ -14,7 +14,7 @@ import { MinAgeInput } from '../min_age_input';
import {
EuiDescribedFormGroup,
EuiButton,
EuiSwitch,
} from '@elastic/eui';
import {
PHASE_DELETE,
@ -49,63 +49,51 @@ export class DeletePhase extends PureComponent {
} = this.props;
return (
<EuiDescribedFormGroup
title={
<div>
<span className="eui-displayInlineBlock eui-alignMiddle">
<FormattedMessage
id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.deletePhaseLabel"
defaultMessage="Delete phase"
/>
</span>{' '}
{phaseData[PHASE_ENABLED] && !isShowingErrors ? (
<ActiveBadge />
) : null}
<PhaseErrorMessage isShowingErrors={isShowingErrors} />
</div>
}
titleSize="s"
description={
<Fragment>
<p>
<FormattedMessage
id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.deletePhaseDescriptionText"
defaultMessage="You no longer need your index. You can define when it is safe to delete it."
/>
<div id="deletePhaseContent" aria-live="polite" role="region">
<EuiDescribedFormGroup
title={
<div>
<span className="eui-displayInlineBlock eui-alignMiddle">
<FormattedMessage
id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.deletePhaseLabel"
defaultMessage="Delete phase"
/>
</span>{' '}
{phaseData[PHASE_ENABLED] && !isShowingErrors ? (
<ActiveBadge />
) : null}
<PhaseErrorMessage isShowingErrors={isShowingErrors} />
</div>
}
titleSize="s"
description={
<Fragment>
<p>
<FormattedMessage
id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.deletePhaseDescriptionText"
defaultMessage="You no longer need your index. You can define when it is safe to delete it."
/>
</p>
{phaseData[PHASE_ENABLED] ? (
<EuiButton
color="danger"
onClick={async () => {
await setPhaseData(PHASE_ENABLED, false);
</p>
<EuiSwitch
data-test-subj="enablePhaseSwitch-delete"
label={
<FormattedMessage
id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.activateWarmPhaseSwitchLabel"
defaultMessage="Activate delete phase"
/>
}
id={`${PHASE_DELETE}-${PHASE_ENABLED}`}
checked={phaseData[PHASE_ENABLED]}
onChange={async e => {
await setPhaseData(PHASE_ENABLED, e.target.checked);
}}
aria-controls="deletePhaseContent"
>
<FormattedMessage
id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.deactivateDeletePhaseButton"
defaultMessage="Deactivate delete phase"
/>
</EuiButton>
) : (
<EuiButton
data-test-subj="activatePhaseButton-delete"
onClick={async () => {
await setPhaseData(PHASE_ENABLED, true);
}}
aria-controls="deletePhaseContent"
>
<FormattedMessage
id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.activateDeletePhaseButton"
defaultMessage="Activate delete phase"
/>
</EuiButton>
)}
</Fragment>
}
fullWidth
>
<div id="deletePhaseContent" aria-live="polite" role="region">
/>
</Fragment>
}
fullWidth
>
{phaseData[PHASE_ENABLED] ? (
<MinAgeInput
errors={errors}
@ -116,8 +104,8 @@ export class DeletePhase extends PureComponent {
rolloverEnabled={hotPhaseRolloverEnabled}
/>
) : <div />}
</div>
</EuiDescribedFormGroup>
</EuiDescribedFormGroup>
</div>
);
}
}

179
x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/warm_phase/warm_phase.js
View file

@ -16,7 +16,6 @@ import {
EuiFieldNumber,
EuiSwitch,
EuiDescribedFormGroup,
EuiButton,
} from '@elastic/eui';
import {
PHASE_WARM,
@ -83,7 +82,7 @@ class WarmPhaseUi extends PureComponent {
defaultMessage: 'Force merge data',
});
return (
<Fragment>
<div id="warmPhaseContent" aria-live="polite" role="region" aria-relevant="additions">
<EuiDescribedFormGroup
title={
<div>
@ -108,117 +107,103 @@ class WarmPhaseUi extends PureComponent {
For faster searches, you can reduce the number of shards and force merge segments."
/>
</p>
{phaseData[PHASE_ENABLED] ? (
<EuiButton
color="danger"
onClick={async () => {
await setPhaseData(PHASE_ENABLED, false);
}}
aria-controls="warmPhaseContent"
>
<EuiSwitch
data-test-subj="enablePhaseSwitch-warm"
label={
<FormattedMessage
id="xpack.indexLifecycleMgmt.editPolicy.warmPhase.deactivateWarmPhaseButton"
defaultMessage="Deactivate warm phase"
/>
</EuiButton>
) : (
<EuiButton
data-test-subj="activatePhaseButton-warm"
onClick={async () => {
await setPhaseData(PHASE_ENABLED, true);
}}
aria-controls="warmPhaseContent"
>
<FormattedMessage
id="xpack.indexLifecycleMgmt.editPolicy.warmPhase.activateWarmPhaseButton"
id="xpack.indexLifecycleMgmt.editPolicy.warmPhase.activateWarmPhaseSwitchLabel"
defaultMessage="Activate warm phase"
/>
</EuiButton>
)}
}
id={`${PHASE_WARM}-${PHASE_ENABLED}`}
checked={phaseData[PHASE_ENABLED]}
onChange={async e => {
await setPhaseData(PHASE_ENABLED, e.target.checked);
}}
aria-controls="warmPhaseContent"
/>
</Fragment>
}
fullWidth
>
<Fragment>
<div id="warmPhaseContent" aria-live="polite" role="region">
{phaseData[PHASE_ENABLED] ? (
<Fragment>
{hotPhaseRolloverEnabled ? (
<EuiFormRow
{phaseData[PHASE_ENABLED] ? (
<Fragment>
{hotPhaseRolloverEnabled ? (
<EuiFormRow
id={`${PHASE_WARM}-${WARM_PHASE_ON_ROLLOVER}`}
>
<EuiSwitch
data-test-subj="warmPhaseOnRolloverSwitch"
label={moveToWarmPhaseOnRolloverLabel}
id={`${PHASE_WARM}-${WARM_PHASE_ON_ROLLOVER}`}
>
<EuiSwitch
data-test-subj="warmPhaseOnRolloverSwitch"
label={moveToWarmPhaseOnRolloverLabel}
id={`${PHASE_WARM}-${WARM_PHASE_ON_ROLLOVER}`}
checked={phaseData[WARM_PHASE_ON_ROLLOVER]}
onChange={async e => {
await setPhaseData(WARM_PHASE_ON_ROLLOVER, e.target.checked);
}}
/>
</EuiFormRow>
) : null}
{!phaseData[WARM_PHASE_ON_ROLLOVER] ? (
<MinAgeInput
errors={errors}
phaseData={phaseData}
phase={PHASE_WARM}
isShowingErrors={isShowingErrors}
setPhaseData={setPhaseData}
rolloverEnabled={hotPhaseRolloverEnabled}
checked={phaseData[WARM_PHASE_ON_ROLLOVER]}
onChange={async e => {
await setPhaseData(WARM_PHASE_ON_ROLLOVER, e.target.checked);
}}
/>
) : null}
<EuiSpacer />
<NodeAllocation
phase={PHASE_WARM}
setPhaseData={setPhaseData}
showNodeDetailsFlyout={showNodeDetailsFlyout}
</EuiFormRow>
) : null}
{!phaseData[WARM_PHASE_ON_ROLLOVER] ? (
<MinAgeInput
errors={errors}
phaseData={phaseData}
phase={PHASE_WARM}
isShowingErrors={isShowingErrors}
setPhaseData={setPhaseData}
rolloverEnabled={hotPhaseRolloverEnabled}
/>
) : null}
<EuiFlexGroup>
<EuiFlexItem grow={false} style={{ maxWidth: 188 }}>
<ErrableFormRow
<EuiSpacer />
<NodeAllocation
phase={PHASE_WARM}
setPhaseData={setPhaseData}
showNodeDetailsFlyout={showNodeDetailsFlyout}
errors={errors}
phaseData={phaseData}
isShowingErrors={isShowingErrors}
/>
<EuiFlexGroup>
<EuiFlexItem grow={false} style={{ maxWidth: 188 }}>
<ErrableFormRow
id={`${PHASE_WARM}-${PHASE_REPLICA_COUNT}`}
label={
<Fragment>
<FormattedMessage
id="xpack.indexLifecycleMgmt.warmPhase.numberOfReplicasLabel"
defaultMessage="Number of replicas"
/>
<OptionalLabel />
</Fragment>
}
errorKey={PHASE_REPLICA_COUNT}
isShowingErrors={isShowingErrors}
errors={errors}
helpText={
intl.formatMessage({
id: 'xpack.indexLifecycleMgmt.warmPhase.replicaCountHelpText',
defaultMessage: 'By default, the number of replicas remains the same.'
})
}
>
<EuiFieldNumber
id={`${PHASE_WARM}-${PHASE_REPLICA_COUNT}`}
label={
<Fragment>
<FormattedMessage
id="xpack.indexLifecycleMgmt.warmPhase.numberOfReplicasLabel"
defaultMessage="Number of replicas"
/>
<OptionalLabel />
</Fragment>
}
errorKey={PHASE_REPLICA_COUNT}
isShowingErrors={isShowingErrors}
errors={errors}
helpText={
intl.formatMessage({
id: 'xpack.indexLifecycleMgmt.warmPhase.replicaCountHelpText',
defaultMessage: 'By default, the number of replicas remains the same.'
})
}
>
<EuiFieldNumber
id={`${PHASE_WARM}-${PHASE_REPLICA_COUNT}`}
value={phaseData[PHASE_REPLICA_COUNT]}
onChange={async e => {
await setPhaseData(PHASE_REPLICA_COUNT, e.target.value);
}}
min={0}
/>
</ErrableFormRow>
</EuiFlexItem>
</EuiFlexGroup>
value={phaseData[PHASE_REPLICA_COUNT]}
onChange={async e => {
await setPhaseData(PHASE_REPLICA_COUNT, e.target.value);
}}
min={0}
/>
</ErrableFormRow>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="m" />
</Fragment>
) : null }
</div>
<EuiSpacer size="m" />
</Fragment>
) : null }
</Fragment>
</EuiDescribedFormGroup>
{phaseData[PHASE_ENABLED] ? (
@ -354,7 +339,7 @@ class WarmPhaseUi extends PureComponent {
/>
</Fragment>
) : null}
</Fragment>
</div>
);
}
}