Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[i18n] Translate ML - File Datavisualizer (Part 2) #25642

Merged
merged 7 commits into from
Dec 12, 2018
Merged

[i18n] Translate ML - File Datavisualizer (Part 2) #25642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9ccd019
translate file_datavisualizer folder of Machine Learning (Part 2)
tibmt Nov 14, 2018
725f4ef
Merge branch 'master' into feature/translations/machineLearningFileDa…
tibmt Nov 22, 2018
311c5f1
Merge branch 'master' into feature/translations/machineLearningFileDa…
pavel06081991 Dec 6, 2018
e59155f
Merge branch 'master' into feature/translations/machineLearningFileDa…
pavel06081991 Dec 11, 2018
658feb1
refactoring
pavel06081991 Dec 11, 2018
55de237
pass id to intl.formatMessage
pavel06081991 Dec 11, 2018
f95ec78
use injectI18n HOC instead of i18n core functionality
pavel06081991 Dec 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion ...ublic/file_datavisualizer/components/file_datavisualizer_view/file_datavisualizer_view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
*/


import { FormattedMessage } from '@kbn/i18n/react';
import React, {
Component,
} from 'react';
Expand Down Expand Up @@ -129,7 +130,12 @@ export class FileDataVisualizerView extends Component {

if (serverSettings.format === 'xml') {
throw {
message: 'XML not currently supported'
message: (
<FormattedMessage
id="xpack.ml.fileDatavisualizer.fileDatavisualizerView.xmlNotCurrentlySupportedErrorMessage"
defaultMessage="XML not currently supported"
/>
),
};
}

Expand Down
44 changes: 37 additions & 7 deletions .../ml/public/file_datavisualizer/components/file_datavisualizer_view/file_error_callouts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { FormattedMessage } from '@kbn/i18n/react';
import React from 'react';

import {
Expand All @@ -25,23 +26,42 @@ export function FileTooLarge({ fileSize, maxFileSize }) {
if (fileSizeFormatted !== maxFileSizeFormatted) {
errorText = (
<p>
The size of the file you selected for upload is {fileSizeFormatted} which
exceeds the maximum permitted size of {maxFileSizeFormatted}
<FormattedMessage
id="xpack.ml.fileDatavisualizer.fileErrorCallouts.fileSizeExceedsAllowedSizeErrorMessage"
defaultMessage="The size of the file you selected for upload is {fileSizeFormatted} which
exceeds the maximum permitted size of {maxFileSizeFormatted}"
values={{
fileSizeFormatted,
maxFileSizeFormatted,
}}
/>
</p>
);
} else {
const diffFormatted = numeral(fileSize - maxFileSize).format(FILE_SIZE_DISPLAY_FORMAT);
errorText = (
<p>
The size of the file you selected for upload exceeds the maximum
permitted size of {maxFileSizeFormatted} by {diffFormatted}
<FormattedMessage
id="xpack.ml.fileDatavisualizer.fileErrorCallouts.fileSizeExceedsAllowedSizeByDiffFormatErrorMessage"
defaultMessage="The size of the file you selected for upload exceeds the maximum
permitted size of {maxFileSizeFormatted} by {diffFormatted}"
values={{
maxFileSizeFormatted,
diffFormatted,
}}
/>
</p>
);
}

return (
<EuiCallOut
title="File size is too large"
title={
<FormattedMessage
id="xpack.ml.fileDatavisualizer.fileErrorCallouts.fileSizeTooLargeTitle"
defaultMessage="File size is too large"
/>
}
color="danger"
iconType="cross"
>
Expand All @@ -53,7 +73,12 @@ export function FileTooLarge({ fileSize, maxFileSize }) {
export function FileCouldNotBeRead({ error, loaded }) {
return (
<EuiCallOut
title="File could not be read"
title={
<FormattedMessage
id="xpack.ml.fileDatavisualizer.fileErrorCallouts.fileCouldNotBeReadTitle"
defaultMessage="File could not be read"
/>
}
color="danger"
iconType="cross"
>
Expand All @@ -63,7 +88,12 @@ export function FileCouldNotBeRead({ error, loaded }) {
}
{
loaded &&
<p>Reverting to previous settings</p>
<p>
<FormattedMessage
id="xpack.ml.fileDatavisualizer.fileErrorCallouts.revertingToPreviousSettingsDescription"
defaultMessage="Reverting to previous settings"
/>
</p>
}
</EuiCallOut>
);
Expand Down
59 changes: 51 additions & 8 deletions x-pack/plugins/ml/public/file_datavisualizer/components/import_errors/errors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
*/


import { FormattedMessage } from '@kbn/i18n/react';
import React from 'react';

import {
Expand Down Expand Up @@ -34,17 +35,47 @@ export function ImportErrors({ errors, statuses }) {
function title(statuses) {
switch (IMPORT_STATUS.FAILED) {
case statuses.readStatus:
return 'Error reading file';
return (
<FormattedMessage
id="xpack.ml.fileDatavisualizer.importErrors.readingFileErrorMessage"
defaultMessage="Error reading file"
/>
);
case statuses.indexCreatedStatus:
return 'Error creating index';
return (
<FormattedMessage
id="xpack.ml.fileDatavisualizer.importErrors.creatingIndexErrorMessage"
defaultMessage="Error creating index"
/>
);
case statuses.ingestPipelineCreatedStatus:
return 'Error creating ingest pipeline';
return (
<FormattedMessage
id="xpack.ml.fileDatavisualizer.importErrors.creatingIngestPipelineErrorMessage"
defaultMessage="Error creating ingest pipeline"
/>
);
case statuses.uploadStatus:
return 'Error uploading data';
return (
<FormattedMessage
id="xpack.ml.fileDatavisualizer.importErrors.uploadingDataErrorMessage"
defaultMessage="Error uploading data"
/>
);
case statuses.indexPatternCreatedStatus:
return 'Error creating index pattern';
return (
<FormattedMessage
id="xpack.ml.fileDatavisualizer.importErrors.creatingIndexPatternErrorMessage"
defaultMessage="Error creating index pattern"
/>
);
default:
return 'Error';
return (
<FormattedMessage
id="xpack.ml.fileDatavisualizer.importErrors.defaultErrorMessage"
defaultMessage="Error"
/>
);
}
}

Expand All @@ -59,7 +90,12 @@ function ImportError(error, key) {
{errorObj.more !== undefined &&
<EuiAccordion
id="more"
buttonContent="More"
buttonContent={
<FormattedMessage
id="xpack.ml.fileDatavisualizer.importErrors.moreButtonLabel"
defaultMessage="More"
/>
}
paddingSize="m"
>
{errorObj.more}
Expand Down Expand Up @@ -99,5 +135,12 @@ function toString(error) {
}
}

return { msg: 'Unknown error' };
return {
msg: (
<FormattedMessage
id="xpack.ml.fileDatavisualizer.importErrors.unknownErrorMessage"
defaultMessage="Unknown error"
/>
),
};
}
125 changes: 101 additions & 24 deletions x-pack/plugins/ml/public/file_datavisualizer/components/import_progress/import_progress.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/


import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
import React from 'react';

import {
Expand All @@ -19,7 +19,7 @@ export const IMPORT_STATUS = {
FAILED: 'danger',
};

export function ImportProgress({ statuses }) {
export const ImportProgress = injectI18n(function ({ statuses, intl }) {

const {
reading,
Expand Down Expand Up @@ -60,43 +60,115 @@ export function ImportProgress({ statuses }) {
completedStep = 5;
}


let processFileTitle = 'Process file';
let createIndexTitle = 'Create index';
let createIngestPipelineTitle = 'Create ingest pipeline';
let uploadingDataTitle = 'Upload data';
let createIndexPatternTitle = 'Create index pattern';
let processFileTitle = intl.formatMessage({
id: 'xpack.ml.fileDatavisualizer.importProgress.processFileTitle',
defaultMessage: 'Process file'
});
let createIndexTitle = intl.formatMessage({
id: 'xpack.ml.fileDatavisualizer.importProgress.createIndexTitle',
defaultMessage: 'Create index'
});
let createIngestPipelineTitle = intl.formatMessage({
id: 'xpack.ml.fileDatavisualizer.importProgress.createIngestPipelineTitle',
defaultMessage: 'Create ingest pipeline'
});
let uploadingDataTitle = intl.formatMessage({
id: 'xpack.ml.fileDatavisualizer.importProgress.uploadDataTitle',
defaultMessage: 'Upload data'
});
let createIndexPatternTitle = intl.formatMessage({
id: 'xpack.ml.fileDatavisualizer.importProgress.createIndexPatternTitle',
defaultMessage: 'Create index pattern'
});

if (completedStep >= 0) {
processFileTitle = 'Processing file';
statusInfo = (<p>Processing file for import</p>);
processFileTitle = intl.formatMessage({
id: 'xpack.ml.fileDatavisualizer.importProgress.processingFileTitle',
defaultMessage: 'Processing file'
});
statusInfo = (
<p>
<FormattedMessage
id="xpack.ml.fileDatavisualizer.importProgress.processingImportedFileDescription"
defaultMessage="Processing file for import"
/>
</p>
);
}
if (completedStep >= 1) {
processFileTitle = 'File processed';
createIndexTitle = 'Creating index';
statusInfo = (<p>Creating index and ingest pipeline</p>);
processFileTitle = intl.formatMessage({
id: 'xpack.ml.fileDatavisualizer.importProgress.fileProcessedTitle',
defaultMessage: 'File processed'
});
createIndexTitle = intl.formatMessage({
id: 'xpack.ml.fileDatavisualizer.importProgress.creatingIndexTitle',
defaultMessage: 'Creating index'
});
statusInfo = (
<p>
<FormattedMessage
id="xpack.ml.fileDatavisualizer.importProgress.stepTwoCreatingIndexIngestPipelineDescription"
defaultMessage="Creating index and ingest pipeline"
/>
</p>
);
}
if (completedStep >= 2) {
createIndexTitle = 'Index created';
createIngestPipelineTitle = 'Creating ingest pipeline';
statusInfo = (<p>Creating index and ingest pipeline</p>);
createIndexTitle = intl.formatMessage({
id: 'xpack.ml.fileDatavisualizer.importProgress.indexCreatedTitle',
defaultMessage: 'Index created'
});
createIngestPipelineTitle = intl.formatMessage({
id: 'xpack.ml.fileDatavisualizer.importProgress.creatingIngestPipelineTitle',
defaultMessage: 'Creating ingest pipeline'
});
statusInfo = (
<p>
<FormattedMessage
id="xpack.ml.fileDatavisualizer.importProgress.stepThreeCreatingIndexIngestPipelineDescription"
defaultMessage="Creating index and ingest pipeline"
/>
</p>
);
}
if (completedStep >= 3) {
createIngestPipelineTitle = 'Ingest pipeline created';
uploadingDataTitle = 'Uploading data';
createIngestPipelineTitle = intl.formatMessage({
id: 'xpack.ml.fileDatavisualizer.importProgress.ingestPipelineCreatedTitle',
defaultMessage: 'Ingest pipeline created'
});
uploadingDataTitle = intl.formatMessage({
id: 'xpack.ml.fileDatavisualizer.importProgress.uploadingDataTitle',
defaultMessage: 'Uploading data'
});
statusInfo = (<UploadFunctionProgress progress={uploadProgress} />);
}
if (completedStep >= 4) {
uploadingDataTitle = 'Data uploaded';
uploadingDataTitle = intl.formatMessage({
id: 'xpack.ml.fileDatavisualizer.importProgress.dataUploadedTitle',
defaultMessage: 'Data uploaded'
});
if (createIndexPattern === true) {
createIndexPatternTitle = 'Creating index pattern';
statusInfo = (<p>Creating index pattern</p>);
createIndexPatternTitle = intl.formatMessage({
id: 'xpack.ml.fileDatavisualizer.importProgress.creatingIndexPatternTitle',
defaultMessage: 'Creating index pattern'
});
statusInfo = (
<p>
<FormattedMessage
id="xpack.ml.fileDatavisualizer.importProgress.creatingIndexPatternDescription"
defaultMessage="Creating index pattern"
/>
</p>
);
} else {
statusInfo = null;
}
}
if (completedStep >= 5) {
createIndexPatternTitle = 'Index pattern created';
createIndexPatternTitle = intl.formatMessage({
id: 'xpack.ml.fileDatavisualizer.importProgress.indexPatternCreatedTitle',
defaultMessage: 'Index pattern created'
});
statusInfo = null;
}

Expand Down Expand Up @@ -159,12 +231,17 @@ export function ImportProgress({ statuses }) {
}
</React.Fragment>
);
}
});

function UploadFunctionProgress({ progress }) {
return (
<React.Fragment>
<p>Uploading data</p>
<p>
<FormattedMessage
id="xpack.ml.fileDatavisualizer.importProgress.uploadingDataDescription"
defaultMessage="Uploading data"
/>
</p>
{(progress < 100) &&
<React.Fragment>
<EuiSpacer size="s" />
Expand Down
Loading