Skip to content

Commit

Permalink
Feature/translate ml-jobs-jobs_list(part_1) (elastic#25466)
Browse files Browse the repository at this point in the history 
Translate ml -> jobsList(part_1)
  • Loading branch information
@Nox911 @pavel06081991
Nox911 authored and pavel06081991 committed Dec 7, 2018
1 parent bb79d69 commit 773c873
Show file tree
Hide file tree
Showing 18 changed files with 480 additions and 109 deletions.
1 change: 1 addition & 0 deletions .i18nrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"xpack.idxMgmt": "x-pack/plugins/index_management",
"xpack.infra": "x-pack/plugins/infra",
"xpack.licenseMgmt": "x-pack/plugins/license_management",
"xpack.ml": "x-pack/plugins/ml",
"xpack.logstash": "x-pack/plugins/logstash",
"xpack.monitoring": "x-pack/plugins/monitoring",
"xpack.reporting": "x-pack/plugins/reporting",
Expand Down
49 changes: 41 additions & 8 deletions x-pack/plugins/ml/public/jobs/jobs_list/components/delete_job_modal/delete_job_modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
} from '@elastic/eui';

import { deleteJobs } from '../utils';
import { FormattedMessage } from '@kbn/i18n/react';

export class DeleteJobModal extends Component {
constructor(props) {
Expand Down Expand Up @@ -79,26 +80,46 @@ export class DeleteJobModal extends Component {
if (this.el && this.state.deleting === true) {
// work around to disable the modal's buttons if the jobs are being deleted
this.el.confirmButton.style.display = 'none';
this.el.cancelButton.textContent = 'Close';
this.el.cancelButton.textContent = (<FormattedMessage
id="xpack.ml.jobsList.deleteJobModal.closeButtonLabel"
defaultMessage="Close"
/>);
}

const title = `Delete ${(this.state.jobs.length > 1) ? `${this.state.jobs.length} jobs` : this.state.jobs[0].id}`;
const title = (
<FormattedMessage
id="xpack.ml.jobsList.deleteJobModal.deleteJobsTitle"
defaultMessage="Delete {jobsCount, plural, one {{jobId}} other {# jobs}}"
values={{
jobsCount: this.state.jobs.length,
jobId: this.state.jobs[0].id
}}
/>);
modal = (
<EuiOverlayMask>
<EuiConfirmModal
ref={this.setEL}
title={title}
onCancel={this.closeModal}
onConfirm={this.deleteJob}
cancelButtonText="Cancel"
confirmButtonText="Delete"
cancelButtonText={(<FormattedMessage
id="xpack.ml.jobsList.deleteJobModal.cancelButtonLabel"
defaultMessage="Cancel"
/>)}
confirmButtonText={(<FormattedMessage
id="xpack.ml.jobsList.deleteJobModal.deleteButtonLabel"
defaultMessage="Delete"
/>)}
buttonColor="danger"
defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
className="eui-textBreakWord"
>
{(this.state.deleting === true) &&
<div>
Deleting jobs
<FormattedMessage
id="xpack.ml.jobsList.deleteJobModal.deletingJobsStatusLabel"
defaultMessage="Deleting jobs"
/>
<EuiSpacer />
<div style={{ textAlign: 'center' }}>
<EuiLoadingSpinner size="l"/>
Expand All @@ -108,10 +129,22 @@ export class DeleteJobModal extends Component {

{(this.state.deleting === false) &&
<React.Fragment>
<p>Are you sure you want to delete {(this.state.jobs.length > 1) ? 'these jobs' : 'this job'}?</p>
<p>
<FormattedMessage
id="xpack.ml.jobsList.deleteJobModal.deleteJobsDescription"
defaultMessage="Are you sure you want to delete {jobsCount, plural, one {this job} other {these jobs}}?"
values={{
jobsCount: this.state.jobs.length
}}
/>
</p>
{(this.state.jobs.length > 1) &&
<p>Deleting multiple jobs can be time consuming.
They will be deleted in the background and may not disappear from the jobs list instantly
<p>
<FormattedMessage
id="xpack.ml.jobsList.deleteJobModal.deleteMultipleJobsDescription"
defaultMessage="Deleting multiple jobs can be time consuming.
They will be deleted in the background and may not disappear from the jobs list instantly"
/>
</p>
}
</React.Fragment>
Expand Down
62 changes: 50 additions & 12 deletions x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/edit_job_flyout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,9 @@ import {
isValidCustomUrls } from '../validate_job';
import { mlMessageBarService } from '../../../../components/messagebar/messagebar_service';
import { toastNotifications } from 'ui/notify';
import { FormattedMessage, injectI18n } from '@kbn/i18n/react';

export class EditJobFlyout extends Component {
class EditJobFlyoutUI extends Component {
constructor(props) {
super(props);

Expand Down Expand Up @@ -134,7 +135,10 @@ export class EditJobFlyout extends Component {

if (jobDetails.jobGroups !== undefined) {
if (jobDetails.jobGroups.some(j => this.props.allJobIds.includes(j))) {
jobGroupsValidationError = 'A job with this ID already exists. Groups and jobs cannot use the same ID.';
jobGroupsValidationError = this.props.intl.formatMessage({
id: 'xpack.ml.jobsList.editJobFlyout.groupsAndJobsHasSameIdErrorMessage',
defaultMessage: 'A job with this ID already exists. Groups and jobs cannot use the same ID.'
});
} else {
jobGroupsValidationError = validateGroupNames(jobDetails.jobGroups).message;
}
Expand Down Expand Up @@ -185,13 +189,21 @@ export class EditJobFlyout extends Component {

saveJob(this.state.job, newJobData)
.then(() => {
toastNotifications.addSuccess(`Changes to ${this.state.job.job_id} saved`);
toastNotifications.addSuccess(this.props.intl.formatMessage({
id: 'xpack.ml.jobsList.editJobFlyout.changesSavedNotificationMessage',
defaultMessage: 'Changes to {jobId} saved' }, {
jobId: this.state.job.job_id }
));
this.refreshJobs();
this.closeFlyout();
})
.catch((error) => {
console.error(error);
toastNotifications.addDanger(`Could not save changes to ${this.state.job.job_id}`);
toastNotifications.addDanger(this.props.intl.formatMessage({
id: 'xpack.ml.jobsList.editJobFlyout.changesNotSavedNotificationMessage',
defaultMessage: 'Could not save changes to {jobId}' }, {
jobId: this.state.job.job_id }
));
mlMessageBarService.notify.error(error);
});
}
Expand Down Expand Up @@ -219,9 +231,14 @@ export class EditJobFlyout extends Component {
isValidJobCustomUrls,
} = this.state;

const { intl } = this.props;

const tabs = [{
id: 'job-details',
name: 'Job details',
name: intl.formatMessage({
id: 'xpack.ml.jobsList.editJobFlyout.jobDetailsTitle',
defaultMessage: 'Job details'
}),
content: <JobDetails
jobDescription={jobDescription}
jobGroups={jobGroups}
Expand All @@ -232,15 +249,21 @@ export class EditJobFlyout extends Component {
/>,
}, {
id: 'detectors',
name: 'Detectors',
name: intl.formatMessage({
id: 'xpack.ml.jobsList.editJobFlyout.detectorsTitle',
defaultMessage: 'Detectors'
}),
content: <Detectors
jobDetectors={jobDetectors}
jobDetectorDescriptions={jobDetectorDescriptions}
setDetectorDescriptions={this.setDetectorDescriptions}
/>,
}, {
id: 'datafeed',
name: 'Datafeed',
name: intl.formatMessage({
id: 'xpack.ml.jobsList.editJobFlyout.datafeedTitle',
defaultMessage: 'Datafeed'
}),
content: <Datafeed
datafeedQuery={datafeedQuery}
datafeedQueryDelay={datafeedQueryDelay}
Expand All @@ -251,7 +274,10 @@ export class EditJobFlyout extends Component {
/>,
}, {
id: 'custom-urls',
name: 'Custom URLs',
name: intl.formatMessage({
id: 'xpack.ml.jobsList.editJobFlyout.customUrlsTitle',
defaultMessage: 'Custom URLs'
}),
content: <CustomUrls
job={job}
jobCustomUrls={jobCustomUrls}
Expand All @@ -269,7 +295,11 @@ export class EditJobFlyout extends Component {
<EuiFlyoutHeader>
<EuiTitle>
<h2>
Edit {job.id}
<FormattedMessage
id="xpack.ml.jobsList.editJobFlyout.pageTitle"
defaultMessage="Edit {jobId}"
values={{ jobId: job.id }}
/>
</h2>
</EuiTitle>
</EuiFlyoutHeader>
Expand All @@ -290,7 +320,10 @@ export class EditJobFlyout extends Component {
onClick={this.closeFlyout}
flush="left"
>
Close
<FormattedMessage
id="xpack.ml.jobsList.editJobFlyout.closeButtonLabel"
defaultMessage="Close"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand All @@ -299,7 +332,10 @@ export class EditJobFlyout extends Component {
fill
isDisabled={(isValidJobDetails === false) || (isValidJobCustomUrls === false)}
>
Save
<FormattedMessage
id="xpack.ml.jobsList.editJobFlyout.saveButtonLabel"
defaultMessage="Save"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
Expand All @@ -317,9 +353,11 @@ export class EditJobFlyout extends Component {
}
}

EditJobFlyout.propTypes = {
EditJobFlyoutUI.propTypes = {
setShowFunction: PropTypes.func.isRequired,
unsetShowFunction: PropTypes.func.isRequired,
refreshJobs: PropTypes.func.isRequired,
allJobIds: PropTypes.array.isRequired,
};

export const EditJobFlyout = injectI18n(EditJobFlyoutUI);
56 changes: 45 additions & 11 deletions x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/tabs/custom_urls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,12 @@ import {
loadIndexPatterns,
} from '../edit_utils';

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

const MAX_NUMBER_DASHBOARDS = 1000;
const MAX_NUMBER_INDEX_PATTERNS = 1000;

export class CustomUrls extends Component {
class CustomUrlsUI extends Component {
constructor(props) {
super(props);

Expand All @@ -65,13 +67,18 @@ export class CustomUrls extends Component {
}

componentDidMount() {
const { intl } = this.props;

loadSavedDashboards(MAX_NUMBER_DASHBOARDS)
.then((dashboards)=> {
this.setState({ dashboards });
})
.catch((resp) => {
console.log('Error loading list of dashboards:', resp);
toastNotifications.addDanger('An error occurred loading the list of saved Kibana dashboards');
toastNotifications.addDanger(intl.formatMessage({
id: 'xpack.ml.jobsList.editJobFlyout.customUrls.loadSavedDashboardsErrorNotificationMessage',
defaultMessage: 'An error occurred loading the list of saved Kibana dashboards'
}));
});

loadIndexPatterns(MAX_NUMBER_INDEX_PATTERNS)
Expand All @@ -80,7 +87,10 @@ export class CustomUrls extends Component {
})
.catch((resp) => {
console.log('Error loading list of dashboards:', resp);
toastNotifications.addDanger('An error occurred loading the list of saved index patterns');
toastNotifications.addDanger(intl.formatMessage({
id: 'xpack.ml.jobsList.editJobFlyout.customUrls.loadIndexPatternsErrorNotificationMessage',
defaultMessage: 'An error occurred loading the list of saved index patterns'
}));
});
}

Expand Down Expand Up @@ -111,12 +121,16 @@ export class CustomUrls extends Component {
})
.catch((resp) => {
console.log('Error building custom URL from settings:', resp);
toastNotifications.addDanger('An error occurred building the new custom URL from the supplied settings');
toastNotifications.addDanger(this.props.intl.formatMessage({
id: 'xpack.ml.jobsList.editJobFlyout.customUrls.addNewUrlErrorNotificationMessage',
defaultMessage: 'An error occurred building the new custom URL from the supplied settings'
}));
});
}

onTestButtonClick = () => {
const job = this.props.job;
const { intl } = this.props;
buildCustomUrlFromSettings(this.state.editorSettings, job)
.then((customUrl) => {
getTestUrl(job, customUrl)
Expand All @@ -125,12 +139,18 @@ export class CustomUrls extends Component {
})
.catch((resp) => {
console.log('Error obtaining URL for test:', resp);
toastNotifications.addWarning('An error occurred obtaining the URL to test the configuration');
toastNotifications.addWarning(intl.formatMessage({
id: 'xpack.ml.jobsList.editJobFlyout.customUrls.getTestUrlErrorNotificationMessage',
defaultMessage: 'An error occurred obtaining the URL to test the configuration'
}));
});
})
.catch((resp) => {
console.log('Error building custom URL from settings:', resp);
toastNotifications.addWarning('An error occurred building the custom URL for testing from the supplied settings');
toastNotifications.addWarning(intl.formatMessage({
id: 'xpack.ml.jobsList.editJobFlyout.customUrls.buildUrlErrorNotificationMessage',
defaultMessage: 'An error occurred building the custom URL for testing from the supplied settings'
}));
});
}

Expand Down Expand Up @@ -160,7 +180,10 @@ export class CustomUrls extends Component {
size="s"
onClick={() => this.editNewCustomUrl()}
>
Add custom URL
<FormattedMessage
id="xpack.ml.jobsList.editJobFlyout.customUrls.addCustomUrlButtonLabel"
defaultMessage="Add custom URL"
/>
</EuiButton>
</React.Fragment>
) : (
Expand All @@ -170,7 +193,10 @@ export class CustomUrls extends Component {
color="text"
onClick={() => this.closeEditor()}
iconType="cross"
aria-label="Close custom URL editor"
aria-label={this.props.intl.formatMessage({
id: 'xpack.ml.jobsList.editJobFlyout.customUrls.closeEditorAriaLabel',
defaultMessage: 'Close custom URL editor'
})}
className="close-editor-button"
/>
<CustomUrlEditor
Expand All @@ -188,7 +214,10 @@ export class CustomUrls extends Component {
onClick={() => this.addNewCustomUrl()}
isDisabled={!isValidEditorSettings}
>
Add
<FormattedMessage
id="xpack.ml.jobsList.editJobFlyout.customUrls.addButtonLabel"
defaultMessage="Add"
/>
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand All @@ -198,7 +227,10 @@ export class CustomUrls extends Component {
onClick={() => this.onTestButtonClick()}
isDisabled={!isValidEditorSettings}
>
Test
<FormattedMessage
id="xpack.ml.jobsList.editJobFlyout.customUrls.testButtonLabel"
defaultMessage="Test"
/>
</EuiButtonEmpty>
</EuiFlexItem>

Expand All @@ -217,8 +249,10 @@ export class CustomUrls extends Component {
);
}
}
CustomUrls.propTypes = {
CustomUrlsUI.propTypes = {
job: PropTypes.object.isRequired,
jobCustomUrls: PropTypes.array.isRequired,
setCustomUrls: PropTypes.func.isRequired,
};

export const CustomUrls = injectI18n(CustomUrlsUI);
Loading

0 comments on commit 773c873

Please sign in to comment.