[i18n] Translate ML missed labels

x-pack/plugins/ml/public/components/anomalies_table/anomaly_details.js

@@ -14,7 +14,7 @@ import PropTypes from 'prop-types';
 import React, { Component, Fragment } from 'react';
 import _ from 'lodash';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
 import {
   EuiDescriptionList,
@@ -216,7 +216,16 @@ function getDetailsItems(anomaly, examples, filter) {
   return items;
 }
 
-export class AnomalyDetails extends Component {
+export const AnomalyDetails = injectI18n(class AnomalyDetails extends Component {
+  static propTypes = {
+    anomaly: PropTypes.object.isRequired,
+    examples: PropTypes.array,
+    definition: PropTypes.object,
+    isAggregatedData: PropTypes.bool,
+    filter: PropTypes.func,
+    influencersLimit: PropTypes.number,
+    tabIndex: PropTypes.number.isRequired
+  };
 
   constructor(props) {
     super(props);
@@ -261,7 +270,7 @@ export class AnomalyDetails extends Component {
   }
 
   renderCategoryExamples() {
-    const { examples, definition } = this.props;
+    const { examples, definition, intl } = this.props;
 
     return (
       <EuiFlexGroup
@@ -274,14 +283,26 @@ export class AnomalyDetails extends Component {
         <Fragment>
           <EuiFlexItem key={`example-terms`}>
             <EuiText size="xs">
-              <h4 className="mlAnomalyCategoryExamples__header">Terms</h4>&nbsp;
+              <h4 className="mlAnomalyCategoryExamples__header">
+                <FormattedMessage
+                  id="xpack.ml.anomaliesTable.anomalyDetails.termsTitle"
+                  defaultMessage="Terms"
+                />
+              </h4>&nbsp;
               <EuiIconTip
-                aria-label="Description"
+                aria-label={intl.formatMessage({
+                  id: 'xpack.ml.anomaliesTable.anomalyDetails.termsDescriptionAriaLabel',
+                  defaultMessage: 'Description'
+                })}
                 type="questionInCircle"
                 color="subdued"
                 size="s"
-                content={`A space separated list of the common tokens that are matched in values of the category
-                (may have been truncated to a max character limit of ${MAX_CHARS})`}
+                content={<FormattedMessage
+                  id="xpack.ml.anomaliesTable.anomalyDetails.termsDescriptionTooltip"
+                  defaultMessage="A space separated list of the common tokens that are matched in values of the category
+                    (may have been truncated to a max character limit of {maxChars})"
+                  values={{ maxChars: MAX_CHARS }}
+                />}
               />
             </EuiText>
             <EuiText size="xs">
@@ -296,12 +317,19 @@ export class AnomalyDetails extends Component {
               <EuiText size="xs">
                 <h4 className="mlAnomalyCategoryExamples__header">Regex</h4>&nbsp;
                 <EuiIconTip
-                  aria-label="Description"
+                  aria-label={intl.formatMessage({
+                    id: 'xpack.ml.anomaliesTable.anomalyDetails.regexDescriptionAriaLabel',
+                    defaultMessage: 'Description'
+                  })}
                   type="questionInCircle"
                   color="subdued"
                   size="s"
-                  content={`The regular expression that is used to search for values that match the category
-                  (may have been truncated to a max character limit of ${MAX_CHARS})`}
+                  content={<FormattedMessage
+                    id="xpack.ml.anomaliesTable.anomalyDetails.regexDescriptionTooltip"
+                    defaultMessage="The regular expression that is used to search for values that match the category
+                      (may have been truncated to a max character limit of {maxChars})"
+                    values={{ maxChars: MAX_CHARS }}
+                  />}
                 />
               </EuiText>
               <EuiText size="xs">
@@ -316,7 +344,12 @@ export class AnomalyDetails extends Component {
             <EuiFlexItem key={`example${i}`}>
               {(i === 0 && definition !== undefined) &&
                 <EuiText size="s">
-                  <h4>Examples</h4>
+                  <h4>
+                    <FormattedMessage
+                      id="xpack.ml.anomaliesTable.anomalyDetails.examplesTitle"
+                      defaultMessage="Examples"
+                    />
+                  </h4>
                 </EuiText>}
               <span className="mlAnomalyCategoryExamples__item">{example}</span>
             </EuiFlexItem>
@@ -527,7 +560,7 @@ export class AnomalyDetails extends Component {
       );
     }
   }
-}
+});
 
 AnomalyDetails.propTypes = {
   anomaly: PropTypes.object.isRequired,

x-pack/plugins/ml/public/components/anomalies_table/anomaly_details.test.js

@@ -6,7 +6,7 @@
 
 
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { shallowWithIntl, mountWithIntl } from 'test_utils/enzyme_helpers';
 import { AnomalyDetails } from './anomaly_details';
 
 const props = {
@@ -68,8 +68,8 @@ const props = {
 describe('AnomalyDetails', () => {
 
   test('Renders with anomaly details tab selected by default', () => {
-    const wrapper = shallow(
-      <AnomalyDetails {...props} />
+    const wrapper = shallowWithIntl(
+      <AnomalyDetails.WrappedComponent {...props} />
     );
 
     expect(wrapper.prop('tabs').length).toBe(2);
@@ -81,8 +81,8 @@ describe('AnomalyDetails', () => {
       ...props,
       tabIndex: 1
     };
-    const wrapper = shallow(
-      <AnomalyDetails {...categoryTabProps} />
+    const wrapper = shallowWithIntl(
+      <AnomalyDetails.WrappedComponent {...categoryTabProps} />
     );
     expect(wrapper.prop('initialSelectedTab').id).toBe('Category examples');
   });
@@ -97,13 +97,11 @@ describe('AnomalyDetails', () => {
       }
     };
 
-    const wrapper = mount(
-      <AnomalyDetails {...categoryTabProps} />
+    const wrapper = mountWithIntl(
+      <AnomalyDetails.WrappedComponent {...categoryTabProps} />
     );
 
-    expect(wrapper.containsMatchingElement(<h4>Regex</h4>)).toBe(true);
-    expect(wrapper.containsMatchingElement(<h4>Terms</h4>)).toBe(true);
-    expect(wrapper.contains(<h4>Examples</h4>)).toBe(true);
+    expect(wrapper).toMatchSnapshot();
   });
 
   test('Renders only with examples when definition prop is undefined', () => {
@@ -113,13 +111,11 @@ describe('AnomalyDetails', () => {
       definition: undefined
     };
 
-    const wrapper = mount(
-      <AnomalyDetails {...categoryTabProps} />
+    const wrapper = mountWithIntl(
+      <AnomalyDetails.WrappedComponent {...categoryTabProps} />
     );
 
-    expect(wrapper.containsMatchingElement(<h4>Regex</h4>)).toBe(false);
-    expect(wrapper.containsMatchingElement(<h4>Terms</h4>)).toBe(false);
-    expect(wrapper.contains(<h4>Examples</h4>)).toBe(false);
+    expect(wrapper).toMatchSnapshot();
   });
 
   test('Renders only with terms when definition.regex is undefined', () => {
@@ -131,13 +127,11 @@ describe('AnomalyDetails', () => {
       }
     };
 
-    const wrapper = mount(
-      <AnomalyDetails {...categoryTabProps} />
+    const wrapper = mountWithIntl(
+      <AnomalyDetails.WrappedComponent {...categoryTabProps} />
     );
 
-    expect(wrapper.containsMatchingElement(<h4>Regex</h4>)).toBe(false);
-    expect(wrapper.containsMatchingElement(<h4>Terms</h4>)).toBe(true);
-    expect(wrapper.contains(<h4>Examples</h4>)).toBe(true);
+    expect(wrapper).toMatchSnapshot();
   });
 
   test('Renders only with regex when definition.terms is undefined', () => {
@@ -149,12 +143,10 @@ describe('AnomalyDetails', () => {
       }
     };
 
-    const wrapper = mount(
-      <AnomalyDetails {...categoryTabProps} />
+    const wrapper = mountWithIntl(
+      <AnomalyDetails.WrappedComponent {...categoryTabProps} />
     );
 
-    expect(wrapper.containsMatchingElement(<h4>Regex</h4>)).toBe(true);
-    expect(wrapper.containsMatchingElement(<h4>Terms</h4>)).toBe(false);
-    expect(wrapper.contains(<h4>Examples</h4>)).toBe(true);
+    expect(wrapper).toMatchSnapshot();
   });
 });

x-pack/plugins/ml/public/components/anomalies_table/links_menu.js

@@ -140,7 +140,6 @@ export const LinksMenu = injectI18n(class LinksMenu extends Component {
   };
 
   viewSeries = () => {
-    const { intl } = this.props;
     const record = this.props.anomaly.source;
     const bounds = this.props.timefilter.getActiveBounds();
     const from = bounds.min.toISOString();    // e.g. 2016-02-08T16:00:00.000Z
@@ -175,10 +174,7 @@ export const LinksMenu = injectI18n(class LinksMenu extends Component {
         jobIds: [record.job_id]
       },
       refreshInterval: {
-        display: intl.formatMessage({
-          id: 'xpack.ml.anomaliesTable.linksMenu.offLabel',
-          defaultMessage: 'Off'
-        }),
+        display: 'Off',
         pause: false,
         value: 0
       },
@@ -297,10 +293,7 @@ export const LinksMenu = injectI18n(class LinksMenu extends Component {
           // Use rison to build the URL .
           const _g = rison.encode({
             refreshInterval: {
-              display: intl.formatMessage({
-                id: 'xpack.ml.anomaliesTable.linksMenu.offLabel',
-                defaultMessage: 'Off'
-              }),
+              display: 'Off',
               pause: false,
               value: 0
             },

x-pack/plugins/ml/public/file_datavisualizer/components/import_view/importer/importer.js

@@ -8,6 +8,7 @@
 import { ml } from '../../../../services/ml_api_service';
 import { chunk } from 'lodash';
 import moment from 'moment';
+import { i18n } from '@kbn/i18n';
 
 const CHUNK_SIZE = 10000;
 const IMPORT_RETRIES = 5;
@@ -51,7 +52,9 @@ export class Importer {
     if (!id || !index) {
       return {
         success: false,
-        error: 'no ID or index supplied'
+        error: i18n.translate('xpack.ml.fileDatavisualizer.importView.noIdOrIndexSuppliedErrorMessage', {
+          defaultMessage: 'no ID or index supplied'
+        })
       };
     }
 

x-pack/plugins/ml/public/jobs/components/job_timepicker_modal/job_timepicker_modal.html

@@ -1,7 +1,10 @@
 <div class="job-timepicker-modal">
   <ml-message-bar ></ml-message-bar>
   <h1
-    tooltip="Start datafeed for {{jobId}}"
+    tooltip="{{ ::'xpack.ml.jobTimePickerModal.startDatafeedForJobTooltip' | i18n: {
+      defaultMessage: 'Start datafeed for {jobId}',
+      values: { jobId }
+    } }}"
     class="euiTitle"
     i18n-id="xpack.ml.jobTimePickerModal.startDatafeedForJobTitle"
     i18n-default-message="Start datafeed for {jobId}"

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

@@ -21,6 +21,7 @@ import { mlJobService } from 'plugins/ml/services/job_service';
 import { checkPermission } from 'plugins/ml/privilege/check_privilege';
 import { ML_DATA_PREVIEW_COUNT } from 'plugins/ml/../common/util/job_utils';
 import { MLJobEditor } from '../ml_job_editor';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 export class DatafeedPreviewPane extends Component {
 
@@ -40,12 +41,18 @@ export class DatafeedPreviewPane extends Component {
     if (canPreviewDatafeed === false) {
       return (
         <EuiCallOut
-          title="You do not have permission to view the datafeed preview"
+          title={<FormattedMessage
+            id="xpack.ml.jobsList.jobDetails.noPermissionToViewDatafeedPreviewTitle"
+            defaultMessage="You do not have permission to view the datafeed preview"
+          />}
           color="warning"
           iconType="alert"
         >
           <p>
-            Please contact your administrator
+            <FormattedMessage
+              id="xpack.ml.jobsList.jobDetails.pleaseContactYourAdministratorLabel"
+              defaultMessage="Please contact your administrator"
+            />
           </p>
         </EuiCallOut>);
     } else if (loading === true) {

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

@@ -255,7 +255,16 @@ class JobsListUI extends Component {
     return (
       <EuiBasicTable
         loading={loading === true}
-        noItemsMessage={loading ? 'Loading jobs...' : 'No jobs found'}
+        noItemsMessage={loading ?
+          intl.formatMessage({
+            id: 'xpack.ml.jobsList.loadingJobsLabel',
+            defaultMessage: 'Loading jobs…'
+          }) :
+          intl.formatMessage({
+            id: 'xpack.ml.jobsList.noJobsFoundLabel',
+            defaultMessage: 'No jobs found'
+          })
+        }
         itemId="id"
         className={`jobs-list-table ${selectedJobsClass}`}
         items={pageOfItems}