Feature/translate ml - jobs(part 2)

.i18nrc.json

@@ -16,6 +16,7 @@
     "xpack.grokDebugger": "x-pack/plugins/grokdebugger",
     "xpack.idxMgmt": "x-pack/plugins/index_management",
     "xpack.licenseMgmt": "x-pack/plugins/license_management",
+    "xpack.ml": "x-pack/plugins/ml",
     "xpack.rollupJobs": "x-pack/plugins/rollup",
     "xpack.searchProfiler": "x-pack/plugins/searchprofiler",
     "xpack.security": "x-pack/plugins/security",

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

@@ -26,11 +26,16 @@ import { toastNotifications } from 'ui/notify';
 import { loadFullJob } from '../utils';
 import { mlCreateWatchService } from '../../../../jobs/new_job/simple/components/watcher/create_watch_service';
 import { CreateWatch } from '../../../../jobs/new_job/simple/components/watcher/create_watch_view';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
 
-function getSuccessToast(id, url) {
+function getSuccessToast(id, url, intl) {
   return {
-    title: `Watch ${id} created successfully`,
+    title: intl.formatMessage({
+      id: 'xpack.ml.jobsList.createWatchFlyout.watchCreatedSuccessfullyNotificationMessage',
+      defaultMessage: 'Watch {id} created successfully' },
+    { id }
+    ),
     text: (
       <React.Fragment>
         <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
@@ -41,7 +46,10 @@ function getSuccessToast(id, url) {
               target="_blank"
               iconType="link"
             >
-              Edit watch
+              {intl.formatMessage({
+                id: 'xpack.ml.jobsList.createWatchFlyout.editWatchButtonLabel',
+                defaultMessage: 'Edit Watch' }
+              )}
             </EuiButton>
           </EuiFlexItem>
         </EuiFlexGroup>
@@ -50,7 +58,7 @@ function getSuccessToast(id, url) {
   };
 }
 
-export class CreateWatchFlyout extends Component {
+class CreateWatchFlyoutUI extends Component {
   constructor(props) {
     super(props);
 
@@ -95,13 +103,17 @@ export class CreateWatchFlyout extends Component {
   }
 
   save = () => {
+    const { intl } = this.props;
     mlCreateWatchService.createNewWatch(this.state.jobId)
     	.then((resp) => {
-        toastNotifications.addSuccess(getSuccessToast(resp.id, resp.url));
+        toastNotifications.addSuccess(getSuccessToast(resp.id, resp.url, intl));
         this.closeFlyout();
       })
       .catch((error) => {
-        toastNotifications.addDanger(`Could not save watch`);
+        toastNotifications.addDanger(intl.formatMessage({
+          id: 'xpack.ml.jobsList.createWatchFlyout.watchNotSavedErrorNotificationMessage',
+          defaultMessage: 'Could not save watch'
+        }));
         console.error(error);
       });
   }
@@ -125,7 +137,11 @@ export class CreateWatchFlyout extends Component {
           <EuiFlyoutHeader>
             <EuiTitle>
               <h2>
-                Create watch for {jobId}
+                <FormattedMessage
+                  id="xpack.ml.jobsList.createWatchFlyout.pageTitle"
+                  defaultMessage="Create watch for {jobId}"
+                  values={{ jobId }}
+                />
               </h2>
             </EuiTitle>
           </EuiFlyoutHeader>
@@ -145,15 +161,21 @@ export class CreateWatchFlyout extends Component {
                   onClick={this.closeFlyout}
                   flush="left"
                 >
-                  Close
+                  <FormattedMessage
+                    id="xpack.ml.jobsList.createWatchFlyout.closeButtonLabel"
+                    defaultMessage="Close"
+                  />
                 </EuiButtonEmpty>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiButton
                   onClick={this.save}
                   fill
                 >
-                  Save
+                  <FormattedMessage
+                    id="xpack.ml.jobsList.createWatchFlyout.saveButtonLabel"
+                    defaultMessage="Save"
+                  />
                 </EuiButton>
               </EuiFlexItem>
             </EuiFlexGroup>
@@ -169,8 +191,10 @@ export class CreateWatchFlyout extends Component {
 
   }
 }
-CreateWatchFlyout.propTypes = {
+CreateWatchFlyoutUI.propTypes = {
   setShowFunction: PropTypes.func.isRequired,
   unsetShowFunction: PropTypes.func.isRequired,
 };
 
+export const CreateWatchFlyout = injectI18n(CreateWatchFlyoutUI);
+

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

@@ -7,6 +7,7 @@
 
 import { detectorToString } from 'plugins/ml/util/string_utils';
 import { formatValues, filterObjects } from './format_values';
+import { i18n } from '@kbn/i18n';
 
 export function extractJobDetails(job) {
 
@@ -15,14 +16,18 @@ export function extractJobDetails(job) {
   }
 
   const general = {
-    title: 'General',
+    title: i18n.translate('xpack.ml.jobsList.jobDetail.generalTitle', {
+      defaultMessage: 'General'
+    }),
     position: 'left',
     items: filterObjects(job, true).map(formatValues)
   };
 
 
   const customUrl = {
-    title: 'Custom URLs',
+    title: i18n.translate('xpack.ml.jobsList.jobDetail.customUrlsTitle', {
+      defaultMessage: 'Custom URLs'
+    }),
     position: 'right',
     items: []
   };
@@ -31,7 +36,9 @@ export function extractJobDetails(job) {
   }
 
   const node = {
-    title: 'Node',
+    title: i18n.translate('xpack.ml.jobsList.jobDetail.nodeTitle', {
+      defaultMessage: 'Node'
+    }),
     position: 'right',
     items: []
   };
@@ -40,7 +47,9 @@ export function extractJobDetails(job) {
   }
 
   const detectors = {
-    title: 'Detectors',
+    title: i18n.translate('xpack.ml.jobsList.jobDetail.detectorsTitle', {
+      defaultMessage: 'Detectors'
+    }),
     position: 'left',
     items: []
   };
@@ -55,31 +64,41 @@ export function extractJobDetails(job) {
   }
 
   const influencers = {
-    title: 'Influencers',
+    title: i18n.translate('xpack.ml.jobsList.jobDetail.influencersTitle', {
+      defaultMessage: 'Influencers'
+    }),
     position: 'left',
     items: job.analysis_config.influencers.map(i => ['', i])
   };
 
   const analysisConfig = {
-    title: 'Analysis config',
+    title: i18n.translate('xpack.ml.jobsList.jobDetail.analysisConfigTitle', {
+      defaultMessage: 'Analysis config'
+    }),
     position: 'left',
     items: filterObjects(job.analysis_config)
   };
 
   const analysisLimits = {
-    title: 'Analysis limits',
+    title: i18n.translate('xpack.ml.jobsList.jobDetail.analysisLimitsTitle', {
+      defaultMessage: 'Analysis limits'
+    }),
     position: 'left',
     items: filterObjects(job.analysis_limits)
   };
 
   const dataDescription = {
-    title: 'Data description',
+    title: i18n.translate('xpack.ml.jobsList.jobDetail.dataDescriptionTitle', {
+      defaultMessage: 'Data description'
+    }),
     position: 'right',
     items: filterObjects(job.data_description)
   };
 
   const datafeed = {
-    title: 'Datafeed',
+    title: i18n.translate('xpack.ml.jobsList.jobDetail.datafeedTitle', {
+      defaultMessage: 'Datafeed'
+    }),
     position: 'left',
     items: filterObjects(job.datafeed_config, true, true)
   };
@@ -88,13 +107,17 @@ export function extractJobDetails(job) {
   }
 
   const counts = {
-    title: 'Counts',
+    title: i18n.translate('xpack.ml.jobsList.jobDetail.countsTitle', {
+      defaultMessage: 'Counts'
+    }),
     position: 'left',
     items: filterObjects(job.data_counts).map(formatValues)
   };
 
   const modelSizeStats = {
-    title: 'Model size stats',
+    title: i18n.translate('xpack.ml.jobsList.jobDetail.modelSizeStatsTitle', {
+      defaultMessage: 'Model size stats'
+    }),
     position: 'right',
     items: filterObjects(job.model_size_stats).map(formatValues)
   };