Resolve conflicts with breadcrumbs.js (#29507)

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

@@ -217,6 +217,15 @@ function getDetailsItems(anomaly, examples, filter) {
 }
 
 export 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);
@@ -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">
+                {
+                  i18n.translate('xpack.ml.anomaliesTable.anomalyDetails.termsTitle', {
+                    defaultMessage: 'Terms'
+                  })
+                }
+              </h4>&nbsp;
               <EuiIconTip
-                aria-label="Description"
+                aria-label={i18n.translate('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">
@@ -294,14 +315,26 @@ export class AnomalyDetails extends Component {
           <Fragment>
             <EuiFlexItem key={`example-regex`}>
               <EuiText size="xs">
-                <h4 className="mlAnomalyCategoryExamples__header">Regex</h4>&nbsp;
+                <h4 className="mlAnomalyCategoryExamples__header">
+                  {
+                    i18n.translate('xpack.ml.anomaliesTable.anomalyDetails.regexTitle', {
+                      defaultMessage: 'Regex'
+                    })
+                  }
+                </h4>&nbsp;
                 <EuiIconTip
-                  aria-label="Description"
+                  aria-label={i18n.translate('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 +349,13 @@ export class AnomalyDetails extends Component {
             <EuiFlexItem key={`example${i}`}>
               {(i === 0 && definition !== undefined) &&
                 <EuiText size="s">
-                  <h4>Examples</h4>
+                  <h4>
+                    {
+                      i18n.translate('xpack.ml.anomaliesTable.anomalyDetails.examplesTitle', {
+                        defaultMessage: 'Examples'
+                      })
+                    }
+                  </h4>
                 </EuiText>}
               <span className="mlAnomalyCategoryExamples__item">{example}</span>
             </EuiFlexItem>
@@ -528,13 +567,3 @@ export class AnomalyDetails extends Component {
     }
   }
 }
-
-AnomalyDetails.propTypes = {
-  anomaly: PropTypes.object.isRequired,
-  examples: PropTypes.array,
-  definition: PropTypes.object,
-  isAggregatedData: PropTypes.bool,
-  filter: PropTypes.func,
-  influencersLimit: PropTypes.number,
-  tabIndex: PropTypes.number.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,7 +68,7 @@ const props = {
 describe('AnomalyDetails', () => {
 
   test('Renders with anomaly details tab selected by default', () => {
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <AnomalyDetails {...props} />
     );
 
@@ -81,7 +81,7 @@ describe('AnomalyDetails', () => {
       ...props,
       tabIndex: 1
     };
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <AnomalyDetails {...categoryTabProps} />
     );
     expect(wrapper.prop('initialSelectedTab').id).toBe('Category examples');
@@ -97,7 +97,7 @@ describe('AnomalyDetails', () => {
       }
     };
 
-    const wrapper = mount(
+    const wrapper = mountWithIntl(
       <AnomalyDetails {...categoryTabProps} />
     );
 
@@ -113,7 +113,7 @@ describe('AnomalyDetails', () => {
       definition: undefined
     };
 
-    const wrapper = mount(
+    const wrapper = mountWithIntl(
       <AnomalyDetails {...categoryTabProps} />
     );
 
@@ -131,7 +131,7 @@ describe('AnomalyDetails', () => {
       }
     };
 
-    const wrapper = mount(
+    const wrapper = mountWithIntl(
       <AnomalyDetails {...categoryTabProps} />
     );
 
@@ -149,7 +149,7 @@ describe('AnomalyDetails', () => {
       }
     };
 
-    const wrapper = mount(
+    const wrapper = mountWithIntl(
       <AnomalyDetails {...categoryTabProps} />
     );
 

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}

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

@@ -29,6 +29,7 @@ import { ml } from '../../../../../services/ml_api_service';
 import { GroupList } from './group_list';
 import { NewGroupInput } from './new_group_input';
 import { mlMessageBarService } from '../../../../../components/messagebar/messagebar_service';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
 function createSelectedGroups(jobs, groups) {
   const jobIds = jobs.map(j => j.id);
@@ -54,7 +55,13 @@ function createSelectedGroups(jobs, groups) {
   return selectedGroups;
 }
 
-export class GroupSelector extends Component {
+export const GroupSelector = injectI18n(class GroupSelector extends Component {
+  static propTypes = {
+    jobs: PropTypes.array.isRequired,
+    allJobIds: PropTypes.array.isRequired,
+    refreshJobs: PropTypes.func.isRequired,
+  };
+
   constructor(props) {
     super(props);
 
@@ -191,6 +198,7 @@ export class GroupSelector extends Component {
   }
 
   render() {
+    const { intl } = this.props;
     const {
       groups,
       selectedGroups,
@@ -199,17 +207,22 @@ export class GroupSelector extends Component {
     const button = (
       <EuiToolTip
         position="bottom"
-        content={`Edit job groups`}
+        content={<FormattedMessage
+          id="xpack.ml.jobsList.multiJobActions.groupSelector.editJobGroupsButtonTooltip"
+          defaultMessage="Edit job groups"
+        />}
       >
         <EuiButtonIcon
           iconType="indexEdit"
-          aria-label="Edit job groups"
+          aria-label={intl.formatMessage({
+            id: 'xpack.ml.jobsList.multiJobActions.groupSelector.editJobGroupsButtonAriaLabel',
+            defaultMessage: 'Edit job groups'
+          })}
           onClick={() => this.togglePopover()}
           disabled={this.canUpdateJob === false}
         />
       </EuiToolTip>
     );
-    const s = (this.props.jobs.length > 1 ? 's' : '');
 
     return (
       <EuiPopover
@@ -220,7 +233,13 @@ export class GroupSelector extends Component {
         closePopover={() => this.closePopover()}
       >
         <div className="group-selector">
-          <EuiPopoverTitle>Apply groups to job{s}</EuiPopoverTitle>
+          <EuiPopoverTitle>
+            <FormattedMessage
+              id="xpack.ml.jobsList.multiJobActions.groupSelector.applyGroupsToJobTitle"
+              defaultMessage="Apply groups to {jobsCount, plural, one {job} other {jobs}}"
+              values={{ jobsCount: this.props.jobs.length }}
+            />
+          </EuiPopoverTitle>
 
           <GroupList
             groups={groups}
@@ -245,7 +264,10 @@ export class GroupSelector extends Component {
                   onClick={this.applyChanges}
                   isDisabled={(edited === false)}
                 >
-                  Apply
+                  <FormattedMessage
+                    id="xpack.ml.jobsList.multiJobActions.groupSelector.applyButtonLabel"
+                    defaultMessage="Apply"
+                  />
                 </EuiButton>
               </EuiFlexItem>
             </EuiFlexGroup>
@@ -254,9 +276,4 @@ export class GroupSelector extends Component {
       </EuiPopover>
     );
   }
-}
-GroupSelector.propTypes = {
-  jobs: PropTypes.array.isRequired,
-  allJobIds: PropTypes.array.isRequired,
-  refreshJobs: PropTypes.func.isRequired,
-};
+});