maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[ML] Adding translatable strings to new job wizards (#43344)

Browse source 
* [ML] Adding translatable strings to new job wizards

* missed string
This commit is contained in:
James Gowdy 2019-08-16 07:34:57 +01:00 committed by GitHub
parent 488cc176fd
commit 24b5648a0d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
29 changed files with 342 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/additional_section/components/calendars/description.tsx
View file

@ -4,7 +4,9 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { Fragment, memo, FC } from 'react';
import React, { memo, FC } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiDescribedFormGroup, EuiFormRow } from '@elastic/eui';
interface Props {
@ -12,16 +14,21 @@ interface Props {
}
export const Description: FC<Props> = memo(({ children }) => {
const title = 'Calendars';
const title = i18n.translate(
'xpack.ml.newJob.wizard.jobDetailsStep.additionalSection.calendarsSelection.title',
{
defaultMessage: 'Calendars',
}
);
return (
<EuiDescribedFormGroup
idAria="single-example-aria"
title={<h3>{title}</h3>}
description={
<Fragment>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</Fragment>
<FormattedMessage
id="xpack.ml.newJob.wizard.jobDetailsStep.additionalSection.calendarsSelection.description"
defaultMessage="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
/>
}
>
<EuiFormRow label={title} describedByIds={['single-example-aria']}>

10
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/advanced_section/advanced_section.tsx
View file

@ -4,13 +4,19 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { FC, Fragment } from 'react';
import React, { FC } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiFlexGroup, EuiFlexItem, EuiAccordion, EuiSpacer } from '@elastic/eui';
import { ModelPlotSwitch } from './components/model_plot';
import { DedicatedIndexSwitch } from './components/dedicated_index';
import { ModelMemoryLimitInput } from './components/model_memory_limit';
const ButtonContent = <Fragment>Advanced</Fragment>;
const ButtonContent = i18n.translate(
'xpack.ml.newJob.wizard.jobDetailsStep.advancedSectionButton',
{
defaultMessage: 'Advanced',
}
);
interface Props {
advancedExpanded: boolean;

19
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/advanced_section/components/dedicated_index/description.tsx
View file

@ -4,7 +4,9 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { Fragment, memo, FC } from 'react';
import React, { memo, FC } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiDescribedFormGroup, EuiFormRow } from '@elastic/eui';
interface Props {
@ -12,16 +14,21 @@ interface Props {
}
export const Description: FC<Props> = memo(({ children }) => {
const title = 'Use dedicated index';
const title = i18n.translate(
'xpack.ml.newJob.wizard.jobDetailsStep.advancedSection.useDedicatedIndex.title',
{
defaultMessage: 'Use dedicated index',
}
);
return (
<EuiDescribedFormGroup
idAria="single-example-aria"
title={<h3>{title}</h3>}
description={
<Fragment>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</Fragment>
<FormattedMessage
id="xpack.ml.newJob.wizard.jobDetailsStep.advancedSection.useDedicatedIndex.description"
defaultMessage="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
/>
}
>
<EuiFormRow label={title} describedByIds={['single-example-aria']}>

19
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/advanced_section/components/model_memory_limit/description.tsx
View file

@ -4,7 +4,9 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { Fragment, memo, FC } from 'react';
import React, { memo, FC } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiDescribedFormGroup, EuiFormRow } from '@elastic/eui';
import { Validation } from '../../../../../../../common/job_validator';
@ -14,16 +16,21 @@ interface Props {
}
export const Description: FC<Props> = memo(({ children, validation }) => {
const title = 'Model memory limit';
const title = i18n.translate(
'xpack.ml.newJob.wizard.jobDetailsStep.advancedSection.modelMemoryLimit.title',
{
defaultMessage: 'Model memory limit',
}
);
return (
<EuiDescribedFormGroup
idAria="single-example-aria"
title={<h3>{title}</h3>}
description={
<Fragment>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</Fragment>
<FormattedMessage
id="xpack.ml.newJob.wizard.jobDetailsStep.advancedSection.modelMemoryLimit.description"
defaultMessage="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
/>
}
>
<EuiFormRow

19
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/advanced_section/components/model_plot/description.tsx
View file

@ -4,7 +4,9 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { Fragment, memo, FC } from 'react';
import React, { memo, FC } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiDescribedFormGroup, EuiFormRow } from '@elastic/eui';
interface Props {
@ -12,16 +14,21 @@ interface Props {
}
export const Description: FC<Props> = memo(({ children }) => {
const title = 'Enable model plot';
const title = i18n.translate(
'xpack.ml.newJob.wizard.jobDetailsStep.advancedSection.enableModelPlot.title',
{
defaultMessage: 'Enable model plot',
}
);
return (
<EuiDescribedFormGroup
idAria="single-example-aria"
title={<h3>{title}</h3>}
description={
<Fragment>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</Fragment>
<FormattedMessage
id="xpack.ml.newJob.wizard.jobDetailsStep.advancedSection.enableModelPlot.description"
defaultMessage="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
/>
}
>
<EuiFormRow label={title} describedByIds={['single-example-aria']}>

16
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/groups/description.tsx
View file

@ -4,7 +4,9 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { Fragment, memo, FC } from 'react';
import React, { memo, FC } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiDescribedFormGroup, EuiFormRow } from '@elastic/eui';
import { Validation } from '../../../../../common/job_validator';
@ -14,16 +16,18 @@ interface Props {
}
export const Description: FC<Props> = memo(({ children, validation }) => {
const title = 'Groups';
const title = i18n.translate('xpack.ml.newJob.wizard.jobDetailsStep.jobGroupSelect.title', {
defaultMessage: 'Groups',
});
return (
<EuiDescribedFormGroup
idAria="single-example-aria"
title={<h3>{title}</h3>}
description={
<Fragment>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</Fragment>
<FormattedMessage
id="xpack.ml.newJob.wizard.jobDetailsStep.jobGroupSelect.description"
defaultMessage="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
/>
}
>
<EuiFormRow

9
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/groups/groups_input.tsx
View file

@ -68,9 +68,12 @@ export const GroupsInput: FC = () => {
return (
<Description validation={validation}>
<EuiComboBox
placeholder={i18n.translate('xpack.ml.newJob.wizard.jobGroupSelectPlaceholder', {
defaultMessage: 'Select or create groups',
})}
placeholder={i18n.translate(
'xpack.ml.newJob.wizard.jobDetailsStep.jobGroupSelect.placeholder',
{
defaultMessage: 'Select or create groups',
}
)}
options={options}
selectedOptions={selectedOptions}
onChange={onChange}

16
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/job_description/description.tsx
View file

@ -4,7 +4,9 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { Fragment, memo, FC } from 'react';
import React, { memo, FC } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiDescribedFormGroup, EuiFormRow } from '@elastic/eui';
interface Props {
@ -12,16 +14,18 @@ interface Props {
}
export const Description: FC<Props> = memo(({ children }) => {
const title = 'Job description';
const title = i18n.translate('xpack.ml.newJob.wizard.jobDetailsStep.jobDescription.title', {
defaultMessage: 'Job description',
});
return (
<EuiDescribedFormGroup
idAria="single-example-aria"
title={<h3>{title}</h3>}
description={
<Fragment>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</Fragment>
<FormattedMessage
id="xpack.ml.newJob.wizard.jobDetailsStep.jobDescription.description"
defaultMessage="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
/>
}
>
<EuiFormRow label={title} describedByIds={['single-example-aria']}>

1
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/job_description/job_description_input.tsx
View file

@ -21,7 +21,6 @@ export const JobDescriptionInput: FC = () => {
return (
<Description>
<EuiTextArea
placeholder="Job description"
value={jobDescription}
onChange={e => setJobDescription(e.target.value)}
data-test-subj="mlJobWizardInputJobDescription"

16
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/job_id/description.tsx
View file

@ -4,7 +4,9 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { Fragment, memo, FC } from 'react';
import React, { memo, FC } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiDescribedFormGroup, EuiFormRow } from '@elastic/eui';
import { Validation } from '../../../../../common/job_validator';
@ -14,16 +16,18 @@ interface Props {
}
export const Description: FC<Props> = memo(({ children, validation }) => {
const title = 'Job ID';
const title = i18n.translate('xpack.ml.newJob.wizard.jobDetailsStep.jobId.title', {
defaultMessage: 'Job ID',
});
return (
<EuiDescribedFormGroup
idAria="single-example-aria"
title={<h3>{title}</h3>}
description={
<Fragment>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</Fragment>
<FormattedMessage
id="xpack.ml.newJob.wizard.jobDetailsStep.jobId.description"
defaultMessage="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
/>
}
>
<EuiFormRow

1
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/job_id/job_id_input.tsx
View file

@ -32,7 +32,6 @@ export const JobIdInput: FC = () => {
return (
<Description validation={validation}>
<EuiFieldText
placeholder="Job Id"
value={jobId}
onChange={e => setJobId(e.target.value)}
isInvalid={validation.valid === false}

5
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/bucket_span/bucket_span_input.tsx
View file

@ -5,6 +5,7 @@
*/
import React, { FC } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiFieldText } from '@elastic/eui';
interface Props {
@ -18,7 +19,9 @@ export const BucketSpanInput: FC<Props> = ({ bucketSpan, setBucketSpan, isInvali
return (
<EuiFieldText
disabled={disabled}
placeholder="Bucket span"
placeholder={i18n.translate('xpack.ml.newJob.wizard.pickFieldsStep.bucketSpan.placeholder', {
defaultMessage: 'Bucket span',
})}
value={bucketSpan}
onChange={e => setBucketSpan(e.target.value)}
isInvalid={isInvalid}

16
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/bucket_span/description.tsx
View file

@ -4,7 +4,9 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { Fragment, memo, FC } from 'react';
import React, { memo, FC } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiDescribedFormGroup, EuiFormRow } from '@elastic/eui';
import { Validation } from '../../../../../common/job_validator';
@ -14,16 +16,18 @@ interface Props {
}
export const Description: FC<Props> = memo(({ children, validation }) => {
const title = 'Bucket span';
const title = i18n.translate('xpack.ml.newJob.wizard.pickFieldsStep.bucketSpan.title', {
defaultMessage: 'Bucket span',
});
return (
<EuiDescribedFormGroup
idAria="single-example-aria"
title={<h3>{title}</h3>}
description={
<Fragment>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</Fragment>
<FormattedMessage
id="xpack.ml.newJob.wizard.pickFieldsStep.bucketSpan.description"
defaultMessage="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
/>
}
>
<EuiFormRow

6
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/bucket_span_estimator/bucket_span_estimator.tsx
View file

@ -5,6 +5,7 @@
*/
import React, { FC, useEffect } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiButton } from '@elastic/eui';
import { useEstimateBucketSpan, ESTIMATE_STATUS } from './estimate_bucket_span';
@ -22,7 +23,10 @@ export const BucketSpanEstimator: FC<Props> = ({ setEstimating }) => {
return (
<EuiButton disabled={status === ESTIMATE_STATUS.RUNNING} onClick={estimateBucketSpan}>
Estimate bucket span
<FormattedMessage
id="xpack.ml.newJob.wizard.pickFieldsStep.bucketSpanEstimatorButton"
defaultMessage="Estimate bucket span"
/>
</EuiButton>
);
};

2
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/bucket_span_estimator/estimate_bucket_span.ts
View file

@ -56,7 +56,7 @@ export function useEstimateBucketSpan() {
}
}
toastNotifications.addDanger({
title: i18n.translate('xpack.ml.newJob.wizard.estimateBucketSpanError', {
title: i18n.translate('xpack.ml.newJob.wizard.pickFieldsStep.bucketSpanEstimatorError', {
defaultMessage: `Bucket span estimation error`,
}),
text,

16
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/influencers/description.tsx
View file

@ -4,7 +4,9 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { Fragment, memo, FC } from 'react';
import React, { memo, FC } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiDescribedFormGroup, EuiFormRow } from '@elastic/eui';
interface Props {
@ -12,16 +14,18 @@ interface Props {
}
export const Description: FC<Props> = memo(({ children }) => {
const title = 'Influencers';
const title = i18n.translate('xpack.ml.newJob.wizard.pickFieldsStep.influencers.title', {
defaultMessage: 'Influencers',
});
return (
<EuiDescribedFormGroup
idAria="single-example-aria"
title={<h3>{title}</h3>}
description={
<Fragment>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</Fragment>
<FormattedMessage
id="xpack.ml.newJob.wizard.pickFieldsStep.influencers.description"
defaultMessage="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
/>
}
>
<EuiFormRow label={title} describedByIds={['single-example-aria']}>

7
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/multi_metric_view/metric_selector.tsx
View file

@ -5,6 +5,7 @@
*/
import React, { FC } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiFormRow, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { Field, AggFieldPair } from '../../../../../../../../common/types/fields';
import { AggSelect, DropDownLabel, DropDownProps } from '../agg_select';
@ -29,7 +30,11 @@ export const MetricSelector: FC<Props> = ({
return (
<EuiFlexGroup style={{ maxWidth: maxWidth !== undefined ? maxWidth : MAX_WIDTH }}>
<EuiFlexItem>
<EuiFormRow label="Add metric">
<EuiFormRow
label={i18n.translate('xpack.ml.newJob.wizard.pickFieldsStep.multiMetricView.addMetric', {
defaultMessage: 'Add metric',
})}
>
<AggSelect
fields={fields}
changeHandler={detectorChangeHandler}

2
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/population_view/metric_selection.tsx
View file

@ -233,7 +233,7 @@ export const PopulationDetectors: FC<Props> = ({ isActive, setIsValid }) => {
{isActive === false && splitField === null && (
<Fragment>
Population label TODO
{/* Population label TODO */}
{splitField !== null && <EuiHorizontalRule margin="l" />}
</Fragment>
)}

7
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/population_view/metric_selector.tsx
View file

@ -5,6 +5,7 @@
*/
import React, { FC } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiFormRow, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { Field, AggFieldPair } from '../../../../../../../../common/types/fields';
import { AggSelect, DropDownLabel, DropDownProps } from '../agg_select';
@ -29,7 +30,11 @@ export const MetricSelector: FC<Props> = ({
return (
<EuiFlexGroup style={{ maxWidth: maxWidth !== undefined ? maxWidth : MAX_WIDTH }}>
<EuiFlexItem>
<EuiFormRow label="Add metric">
<EuiFormRow
label={i18n.translate('xpack.ml.newJob.wizard.pickFieldsStep.populationView.addMetric', {
defaultMessage: 'Add metric',
})}
>
<AggSelect
fields={fields}
changeHandler={detectorChangeHandler}

6
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/single_metric_view/settings.tsx
View file

@ -5,6 +5,7 @@
*/
import React, { Fragment, FC, useContext, useEffect, useState } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
import { JobCreatorContext } from '../../../job_creator_context';
@ -57,7 +58,10 @@ export const SingleMetricSettings: FC<Props> = ({ isActive, setIsValid }) => {
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiButtonEmpty onClick={convertToMultiMetricJob}>
Convert to multi metric job
<FormattedMessage
id="xpack.ml.newJob.wizard.pickFieldsStep.singleMetricView.convertToMultiMetricButton"
defaultMessage="Convert to multi metric job"
/>
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>

9
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/split_cards/split_cards.tsx
View file

@ -5,6 +5,7 @@
*/
import React, { FC, memo, Fragment } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
import { SplitField } from '../../../../../../../../common/types/fields';
@ -85,7 +86,13 @@ export const SplitCards: FC<Props> = memo(
<Fragment>
{jobType === JOB_TYPE.MULTI_METRIC && (
<Fragment>
<div style={{ fontSize: 'small' }}>Data split by {splitField.name}</div>
<div style={{ fontSize: 'small' }}>
<FormattedMessage
id="xpack.ml.newJob.wizard.pickFieldsStep.splitCards.dataSplitBy"
defaultMessage="Data split by {field}"
values={{ field: splitField.name }}
/>
</div>
<EuiSpacer size="m" />
</Fragment>
)}

28
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/split_field/description.tsx
View file

@ -4,7 +4,9 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { Fragment, memo, FC } from 'react';
import React, { memo, FC } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiDescribedFormGroup, EuiFormRow } from '@elastic/eui';
import { JOB_TYPE } from '../../../../../common/job_creator/util/constants';
@ -16,16 +18,18 @@ interface Props {
export const Description: FC<Props> = memo(({ children, jobType }) => {
if (jobType === JOB_TYPE.MULTI_METRIC) {
const title = 'Split field';
const title = i18n.translate('xpack.ml.newJob.wizard.pickFieldsStep.splitField.title', {
defaultMessage: 'Split field',
});
return (
<EuiDescribedFormGroup
idAria="single-example-aria"
title={<h3>{title}</h3>}
description={
<Fragment>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</Fragment>
<FormattedMessage
id="xpack.ml.newJob.wizard.pickFieldsStep.splitField.description"
defaultMessage="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
/>
}
>
<EuiFormRow label={title} describedByIds={['single-example-aria']}>
@ -34,16 +38,18 @@ export const Description: FC<Props> = memo(({ children, jobType }) => {
</EuiDescribedFormGroup>
);
} else if (jobType === JOB_TYPE.POPULATION) {
const title = 'Population field';
const title = i18n.translate('xpack.ml.newJob.wizard.pickFieldsStep.populationField.title', {
defaultMessage: 'Population field',
});
return (
<EuiDescribedFormGroup
idAria="single-example-aria"
title={<h3>{title}</h3>}
description={
<Fragment>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</Fragment>
<FormattedMessage
id="xpack.ml.newJob.wizard.pickFieldsStep.populationField.description"
defaultMessage="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
/>
}
>
<EuiFormRow label={title} describedByIds={['single-example-aria']}>

27
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/components/post_save_options/post_save_options.tsx
View file

@ -48,17 +48,23 @@ export const PostSaveOptions: FC<Props> = ({ jobRunner }) => {
const started = await jobRunner.startDatafeedInRealTime(true);
setDatafeedState(started === true ? DATAFEED_STATE.STARTED : DATAFEED_STATE.STOPPED);
toastNotifications.addSuccess({
title: i18n.translate('xpack.ml.newJob.wizard.startJobInRealTimeSuccess', {
defaultMessage: `Job {jobId} started`,
values: { jobId: jobCreator.jobId },
}),
title: i18n.translate(
'xpack.ml.newJob.wizard.summaryStep.postSaveOptions.startJobInRealTimeSuccess',
{
defaultMessage: `Job {jobId} started`,
values: { jobId: jobCreator.jobId },
}
),
});
} catch (error) {
setDatafeedState(DATAFEED_STATE.STOPPED);
toastNotifications.addDanger({
title: i18n.translate('xpack.ml.newJob.wizard.startJobInRealTimeError', {
defaultMessage: `Error starting job`,
}),
title: i18n.translate(
'xpack.ml.newJob.wizard.summaryStep.postSaveOptions.startJobInRealTimeError',
{
defaultMessage: `Error starting job`,
}
),
text: error.message,
});
}
@ -76,7 +82,7 @@ export const PostSaveOptions: FC<Props> = ({ jobRunner }) => {
data-test-subj="mlButtonUseFullData3"
>
<FormattedMessage
id="xpack.ml.newJob.wizard.startJobInRealTime"
id="xpack.ml.newJob.wizard.summaryStep.postSaveOptions.startJobInRealTime"
defaultMessage="Start job running in real time"
/>
</EuiButton>
@ -90,7 +96,10 @@ export const PostSaveOptions: FC<Props> = ({ jobRunner }) => {
onClick={() => setWatchFlyoutVisible(true)}
data-test-subj="mlButtonUseFullData"
>
<FormattedMessage id="xpack.ml.newJob.wizard.createWatch" defaultMessage="Create watch" />
<FormattedMessage
id="xpack.ml.newJob.wizard.summaryStep.postSaveOptions.createWatch"
defaultMessage="Create watch"
/>
</EuiButton>
{datafeedState === DATAFEED_STATE.STARTED && watchFlyoutVisible && (
<CreateWatchFlyout

93
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/job_details.tsx
View file

@ -5,6 +5,8 @@
*/
import React, { FC, useContext } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiFlexGroup, EuiFlexItem, EuiDescriptionList } from '@elastic/eui';
import { JobCreatorContext } from '../job_creator_context';
import { isMultiMetricJobCreator, isPopulationJobCreator } from '../../../common/job_creator';
@ -19,83 +21,140 @@ export const JobDetails: FC = () => {
const jobDetails: ListItems[] = [
{
title: 'Job ID',
title: i18n.translate('xpack.ml.newJob.wizard.summaryStep.jobDetails.jobDetails.title', {
defaultMessage: 'Job ID',
}),
description: jobCreator.jobId,
},
{
title: 'Job description',
title: i18n.translate('xpack.ml.newJob.wizard.summaryStep.jobDetails.jobDescription.title', {
defaultMessage: 'Job description',
}),
description:
jobCreator.description.length > 0 ? (
jobCreator.description
) : (
<span style={{ fontStyle: 'italic' }}>No description provided</span>
<span style={{ fontStyle: 'italic' }}>
<FormattedMessage
id="xpack.ml.newJob.wizard.summaryStep.jobDetails.jobDescription.placeholder"
defaultMessage="No description provided"
/>
</span>
),
},
{
title: 'Groups',
title: i18n.translate('xpack.ml.newJob.wizard.summaryStep.jobDetails.groups.title', {
defaultMessage: 'Groups',
}),
description:
jobCreator.groups.length > 0 ? (
jobCreator.groups.join(', ')
) : (
<span style={{ fontStyle: 'italic' }}>No groups selected</span>
<span style={{ fontStyle: 'italic' }}>
<FormattedMessage
id="xpack.ml.newJob.wizard.summaryStep.jobDetails.groups.placeholder"
defaultMessage="No groups selected"
/>
</span>
),
},
];
const detectorDetails: ListItems[] = [
{
title: 'Bucket span',
title: i18n.translate('xpack.ml.newJob.wizard.summaryStep.jobDetails.bucketSpan.title', {
defaultMessage: 'Bucket span',
}),
description: jobCreator.bucketSpan,
},
];
if (isMultiMetricJobCreator(jobCreator)) {
detectorDetails.push({
title: 'Split field',
title: i18n.translate('xpack.ml.newJob.wizard.summaryStep.jobDetails.splitField.title', {
defaultMessage: 'Split field',
}),
description:
isMultiMetricJobCreator(jobCreator) && jobCreator.splitField !== null ? (
jobCreator.splitField.name
) : (
<span style={{ fontStyle: 'italic' }}>No split field selected</span>
<span style={{ fontStyle: 'italic' }}>
<FormattedMessage
id="xpack.ml.newJob.wizard.summaryStep.jobDetails.splitField.placeholder"
defaultMessage="No split field selected"
/>
</span>
),
});
}
if (isPopulationJobCreator(jobCreator)) {
detectorDetails.push({
title: 'Population field',
title: i18n.translate('xpack.ml.newJob.wizard.summaryStep.jobDetails.populationField.title', {
defaultMessage: 'Population field',
}),
description:
isPopulationJobCreator(jobCreator) && jobCreator.splitField !== null ? (
jobCreator.splitField.name
) : (
<span style={{ fontStyle: jobCreator.splitField !== null ? 'inherit' : 'italic' }}>
No population field selected
<FormattedMessage
id="xpack.ml.newJob.wizard.summaryStep.jobDetails.populationField.placeholder"
defaultMessage="No population field selected"
/>
</span>
),
});
}
detectorDetails.push({
title: 'Influencers',
title: i18n.translate('xpack.ml.newJob.wizard.summaryStep.jobDetails.influencers.title', {
defaultMessage: 'Influencers',
}),
description:
jobCreator.influencers.length > 0 ? (
jobCreator.influencers.join(', ')
) : (
<span style={{ fontStyle: 'italic' }}>No split field selected</span>
<span style={{ fontStyle: 'italic' }}>
<FormattedMessage
id="xpack.ml.newJob.wizard.summaryStep.jobDetails.influencers.placeholder"
defaultMessage="No influencers selected"
/>
</span>
),
});
const trueLabel = i18n.translate('xpack.ml.newJob.wizard.summaryStep.jobDetails.trueLabel', {
defaultMessage: 'True',
});
const falseLabel = i18n.translate('xpack.ml.newJob.wizard.summaryStep.jobDetails.falseLabel', {
defaultMessage: 'False',
});
const advancedDetails: ListItems[] = [
{
title: 'Enable model plot',
description: jobCreator.modelPlot ? 'True' : 'False',
title: i18n.translate('xpack.ml.newJob.wizard.summaryStep.jobDetails.enableModelPlot.title', {
defaultMessage: 'Enable model plot',
}),
description: jobCreator.modelPlot ? trueLabel : falseLabel,
},
{
title: 'Use dedicated index',
description: jobCreator.useDedicatedIndex ? 'True' : 'False',
title: i18n.translate(
'xpack.ml.newJob.wizard.summaryStep.jobDetails.useDedicatedIndex.title',
{
defaultMessage: 'Use dedicated index',
}
),
description: jobCreator.useDedicatedIndex ? trueLabel : falseLabel,
},
{
title: 'Model memory limit',
title: i18n.translate(
'xpack.ml.newJob.wizard.summaryStep.jobDetails.modelMemoryLimit.title',
{
defaultMessage: 'Model memory limit',
}
),
description: jobCreator.modelMemoryLimit !== null ? jobCreator.modelMemoryLimit : '',
},
];

21
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/json_flyout.tsx
View file

@ -5,6 +5,8 @@
*/
import React, { FC } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiFlyout,
EuiFlyoutFooter,
@ -27,15 +29,28 @@ export const JsonFlyout: FC<Props> = ({ jobCreator, closeFlyout }) => {
<EuiFlyout onClose={closeFlyout} hideCloseButton size="l">
<EuiFlyoutBody>
<EuiFlexGroup>
<Contents title="Job configuration JSON" value={jobCreator.formattedJobJson} />
<Contents title="Datafeed configuration JSON" value={jobCreator.formattedDatafeedJson} />
<Contents
title={i18n.translate('xpack.ml.newJob.wizard.summaryStep.jsonFlyout.job.title', {
defaultMessage: 'Job configuration JSON',
})}
value={jobCreator.formattedJobJson}
/>
<Contents
title={i18n.translate('xpack.ml.newJob.wizard.summaryStep.jsonFlyout.datafeed.title', {
defaultMessage: 'Datafeed configuration JSON',
})}
value={jobCreator.formattedDatafeedJson}
/>
</EuiFlexGroup>
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
Close
<FormattedMessage
id="xpack.ml.newJob.wizard.summaryStep.jsonFlyout.closeLink"
defaultMessage="Close"
/>
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>

13
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/summary.tsx
View file

@ -7,6 +7,7 @@
import React, { Fragment, FC, useContext, useState, useEffect } from 'react';
import { EuiButton, EuiButtonEmpty, EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { toastNotifications } from 'ui/notify';
import { WizardNav } from '../wizard_nav';
import { WIZARD_STEPS, StepProps } from '../step_types';
@ -43,7 +44,7 @@ export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =>
} catch (error) {
// catch and display all job creation errors
toastNotifications.addDanger({
title: i18n.translate('xpack.ml.newJob.wizard.createJobError', {
title: i18n.translate('xpack.ml.newJob.wizard.summaryStep.createJobError', {
defaultMessage: `Job creation error`,
}),
text: error.message,
@ -89,7 +90,10 @@ export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =>
isDisabled={creatingJob === true || isValid === false}
data-test-subj="mlJobWizardButtonCreateJob"
>
Create job
<FormattedMessage
id="xpack.ml.newJob.wizard.summaryStep.createJobButton"
defaultMessage="Create job"
/>
</EuiButton>
&emsp;
</Fragment>
@ -102,7 +106,10 @@ export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =>
isDisabled={progress > 0}
data-test-subj="mlJobWizardButtonPreviewJobJson"
>
Preview job JSON
<FormattedMessage
id="xpack.ml.newJob.wizard.summaryStep.previewJsonButton"
defaultMessage="Preview job JSON"
/>
</EuiButtonEmpty>
{showJsonFlyout && (
<JsonFlyout closeFlyout={() => setShowJsonFlyout(false)} jobCreator={jobCreator} />

15
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/time_range_step/time_range_picker.tsx
View file

@ -6,6 +6,7 @@
import moment from 'moment';
import React, { Fragment, FC, useState, useEffect } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiDatePickerRange, EuiDatePicker } from '@elastic/eui';
import { useKibanaContext } from '../../../../../contexts/kibana';
@ -64,7 +65,12 @@ export const TimeRangePicker: FC<Props> = ({ setTimeRange, timeRange }) => {
onChange={handleChangeStart}
startDate={startMoment}
endDate={endMoment}
aria-label="Start date"
aria-label={i18n.translate(
'xpack.ml.newJob.wizard.timeRangeStep.timeRangePicker.startDateLabel',
{
defaultMessage: 'Start date',
}
)}
showTimeSelect
dateFormat={dateFormat}
maxDate={endMoment}
@ -76,7 +82,12 @@ export const TimeRangePicker: FC<Props> = ({ setTimeRange, timeRange }) => {
onChange={handleChangeEnd}
startDate={startMoment}
endDate={endMoment}
aria-label="End date"
aria-label={i18n.translate(
'xpack.ml.newJob.wizard.timeRangeStep.timeRangePicker.endDateLabel',
{
defaultMessage: 'End date',
}
)}
showTimeSelect
dateFormat={dateFormat}
minDate={startMoment}

13
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/wizard_nav/wizard_nav.tsx
View file

@ -6,7 +6,7 @@
import React, { FC } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
@ -34,9 +34,10 @@ export const WizardNav: FC<StepsNavProps> = ({
size="s"
data-test-subj="mlJobWizardNavButtonPrevious"
>
{i18n.translate('xpack.ml.newJob.wizard.previousStepButton', {
defaultMessage: 'Previous',
})}
<FormattedMessage
id="xpack.ml.newJob.wizard.previousStepButton"
defaultMessage="Previous"
/>
</EuiButton>
</EuiFlexItem>
)}
@ -49,9 +50,7 @@ export const WizardNav: FC<StepsNavProps> = ({
size="s"
data-test-subj="mlJobWizardNavButtonNext"
>
{i18n.translate('xpack.ml.newJob.wizard.nextStepButton', {
defaultMessage: 'Next',
})}
<FormattedMessage id="xpack.ml.newJob.wizard.nextStepButton" defaultMessage="Next" />
</EuiButton>
</EuiFlexItem>
)}

37
x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/new_job/wizard.tsx
View file

@ -7,6 +7,7 @@
import React, { Fragment, FC, useReducer, useState, useEffect } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiStepsHorizontal, EuiSpacer, EuiTitle } from '@elastic/eui';
import { WIZARD_STEPS } from '../components/step_types';
@ -182,7 +183,12 @@ export const Wizard: FC<Props> = ({
{currentStep === WIZARD_STEPS.TIME_RANGE && (
<Fragment>
<Title data-test-subj="mlJobWizardStepTitleTimeRange">Time range</Title>
<Title data-test-subj="mlJobWizardStepTitleTimeRange">
<FormattedMessage
id="xpack.ml.newJob.wizard.stepComponentWrapper.timeRangeTitle"
defaultMessage="Time range"
/>
</Title>
<TimeRangeStep
isCurrentStep={currentStep === WIZARD_STEPS.TIME_RANGE}
setCurrentStep={setCurrentStep}
@ -191,7 +197,12 @@ export const Wizard: FC<Props> = ({
)}
{currentStep === WIZARD_STEPS.PICK_FIELDS && (
<Fragment>
<Title data-test-subj="mlJobWizardStepTitlePickFields">Pick fields</Title>
<Title data-test-subj="mlJobWizardStepTitlePickFields">
<FormattedMessage
id="xpack.ml.newJob.wizard.stepComponentWrapper.pickFieldsTitle"
defaultMessage="Pick fields"
/>
</Title>
<PickFieldsStep
isCurrentStep={currentStep === WIZARD_STEPS.PICK_FIELDS}
setCurrentStep={setCurrentStep}
@ -200,7 +211,12 @@ export const Wizard: FC<Props> = ({
)}
{currentStep === WIZARD_STEPS.JOB_DETAILS && (
<Fragment>
<Title data-test-subj="mlJobWizardStepTitleJobDetails">Job details</Title>
<Title data-test-subj="mlJobWizardStepTitleJobDetails">
<FormattedMessage
id="xpack.ml.newJob.wizard.stepComponentWrapper.jobDetailsTitle"
defaultMessage="Job details"
/>
</Title>
<JobDetailsStep
isCurrentStep={currentStep === WIZARD_STEPS.JOB_DETAILS}
setCurrentStep={setCurrentStep}
@ -213,7 +229,12 @@ export const Wizard: FC<Props> = ({
)}
{currentStep === WIZARD_STEPS.VALIDATION && (
<Fragment>
<Title data-test-subj="mlJobWizardStepTitleValidation">Validation</Title>
<Title data-test-subj="mlJobWizardStepTitleValidation">
<FormattedMessage
id="xpack.ml.newJob.wizard.stepComponentWrapper.validationTitle"
defaultMessage="Validation"
/>
</Title>
<ValidationStep
isCurrentStep={currentStep === WIZARD_STEPS.VALIDATION}
setCurrentStep={setCurrentStep}
@ -222,7 +243,13 @@ export const Wizard: FC<Props> = ({
)}
{currentStep === WIZARD_STEPS.SUMMARY && (
<Fragment>
<Title data-test-subj="mlJobWizardStepTitleSummary">Summary</Title>
<Title data-test-subj="mlJobWizardStepTitleSummary">
<FormattedMessage
id="xpack.ml.newJob.wizard.stepComponentWrapper.summaryTitle"
defaultMessage="Summary"
/>
Summary
</Title>
<SummaryStep
isCurrentStep={currentStep === WIZARD_STEPS.SUMMARY}
setCurrentStep={setCurrentStep}