Feature/translate ml-jobs-jobs_list(part_1)

.i18nrc.json

@@ -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",

x-pack/plugins/ml/public/jobs/jobs_list/components/delete_job_modal/delete_job_modal.js

@@ -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) {
@@ -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"/>
@@ -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>

x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/edit_job_flyout.js

@@ -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);
 
@@ -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;
       }
@@ -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);
       });
   }
@@ -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}
@@ -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}
@@ -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}
@@ -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>
@@ -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}>
@@ -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>
@@ -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);

x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/tabs/custom_urls.js

@@ -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);
 
@@ -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)
@@ -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'
+        }));
       });
   }
 
@@ -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)
@@ -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'
+        }));
       });
   }
 
@@ -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>
         ) : (
@@ -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
@@ -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}>
@@ -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>
 
@@ -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);