[ML] Localize ml components ( part 1 )

x-pack/plugins/ml/public/components/confirm_modal/confirm_modal.html

@@ -6,15 +6,15 @@
       ng-click="ok()"
       ng-disabled="(saveLock === true)"
       class="kuiButton kuiButton--primary"
-      aria-label="OK">
+      aria-label="{{ ::'xpack.ml.confirmModal.okButtonAriaLabel' | i18n: {defaultMessage: 'Ok'} }}">
       {{okLabel}}
     </button>
     <button
       ng-hide="hideCancel"
       ng-click="cancel()"
       ng-disabled="(saveLock === true)"
       class="kuiButton kuiButton--primary"
-      aria-label="Cancel">
+      aria-label="{{ ::'xpack.ml.confirmModal.cancelButtonAriaLabel' | i18n: {defaultMessage: 'Cancel'} }}">
       {{cancelLabel}}
     </button>
   </div>

x-pack/plugins/ml/public/components/confirm_modal/confirm_modal_controller.js

@@ -9,16 +9,21 @@
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
 
-module.controller('MlConfirmModal', function ($scope, $modalInstance, params) {
+module.controller('MlConfirmModal', function ($scope, $modalInstance, params, i18n) {
 
   $scope.okFunc = params.ok;
   $scope.cancelFunc = params.cancel;
 
   $scope.message = params.message || '';
   $scope.title = params.title || '';
 
-  $scope.okLabel = params.okLabel || 'OK';
-  $scope.cancelLabel = params.cancelLabel || 'Cancel';
+  $scope.okLabel = params.okLabel || i18n('xpack.ml.confirmModal.okButtonLabel', {
+    defaultMessage: 'OK',
+  });
+
+  $scope.cancelLabel = params.cancelLabel || i18n('xpack.ml.confirmModal.cancelButtonLabel', {
+    defaultMessage: 'Cancel',
+  });
 
   $scope.hideCancel = params.hideCancel || false;
 

x-pack/plugins/ml/public/components/field_title_bar/field_title_bar.js

@@ -10,6 +10,7 @@ import React from 'react';
 import { EuiText, EuiToolTip } from '@elastic/eui';
 
 import { FieldTypeIcon } from '../field_type_icon';
+import { i18n } from '@kbn/i18n';
 
 export function FieldTitleBar({ card }) {
   // don't render and fail gracefully if card prop isn't set
@@ -26,7 +27,9 @@ export function FieldTitleBar({ card }) {
     classNames.push(card.type);
   }
 
-  const fieldName = card.fieldName || 'document count';
+  const fieldName = card.fieldName || i18n.translate('xpack.ml.fieldTitleBar.documentCountLabel', {
+    defaultMessage: 'document count'
+  });
 
   return (
     <EuiText className={classNames.join(' ')}>

x-pack/plugins/ml/public/components/field_title_bar/field_title_bar.test.js

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import React from 'react';
 
 import { FieldTitleBar } from './field_title_bar';
@@ -27,7 +27,7 @@ describe('FieldTitleBar', () => {
   test(`card prop is an empty object`, () => {
     const props = { card: {} };
 
-    const wrapper = mount(<FieldTitleBar {...props} />);
+    const wrapper = mountWithIntl(<FieldTitleBar {...props} />);
 
     const fieldName = wrapper.find({ className: 'field-name' }).text();
     expect(fieldName).toEqual('document count');
@@ -40,7 +40,7 @@ describe('FieldTitleBar', () => {
     const testFieldName = 'foo';
     const props = { card: { fieldName: testFieldName, isUnsupportedType: true } };
 
-    const wrapper = mount(<FieldTitleBar {...props} />);
+    const wrapper = mountWithIntl(<FieldTitleBar {...props} />);
 
     const fieldName = wrapper.find({ className: 'field-name' }).text();
     expect(fieldName).toEqual(testFieldName);
@@ -54,7 +54,7 @@ describe('FieldTitleBar', () => {
     const testType = 'bar';
     const props = { card: { fieldName: testFieldName, type: testType } };
 
-    const wrapper = mount(<FieldTitleBar {...props} />);
+    const wrapper = mountWithIntl(<FieldTitleBar {...props} />);
 
     const fieldName = wrapper.find({ className: 'field-name' }).text();
     expect(fieldName).toEqual(testFieldName);
@@ -65,7 +65,7 @@ describe('FieldTitleBar', () => {
 
   test(`tooltip hovering`, () => {
     const props = { card: { fieldName: 'foo', type: 'bar' } };
-    const wrapper = mount(<FieldTitleBar {...props} />);
+    const wrapper = mountWithIntl(<FieldTitleBar {...props} />);
     const container = wrapper.find({ className: 'field-name' });
 
     expect(wrapper.find('EuiToolTip').children()).toHaveLength(1);

x-pack/plugins/ml/public/components/field_title_bar/field_title_bar_directive.js

@@ -10,6 +10,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import { FieldTitleBar } from './field_title_bar';
+import { I18nProvider } from '@kbn/i18n/react';
 
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
@@ -32,7 +33,9 @@ module.directive('mlFieldTitleBar', function () {
         };
 
         ReactDOM.render(
-          React.createElement(FieldTitleBar, props),
+          <I18nProvider>
+            {React.createElement(FieldTitleBar, props)}
+          </I18nProvider>,
           element[0]
         );
       }

x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.js

@@ -12,43 +12,68 @@ import { EuiToolTip } from '@elastic/eui';
 // don't use something like plugins/ml/../common
 // because it won't work with the jest tests
 import { ML_JOB_FIELD_TYPES } from '../../../common/constants/field_types';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
-export function FieldTypeIcon({ tooltipEnabled = false, type }) {
+export const FieldTypeIcon = injectI18n(function FieldTypeIcon({ tooltipEnabled = false, type, intl }) {
   let ariaLabel = '';
   let iconClass = '';
   let iconChar = '';
 
   switch (type) {
     case ML_JOB_FIELD_TYPES.BOOLEAN:
-      ariaLabel = 'boolean type';
+      ariaLabel = intl.formatMessage({
+        id: 'xpack.ml.fieldTypeIcon.booleanTypeAriaLabel',
+        defaultMessage: 'boolean type'
+      });
       iconClass = 'fa-adjust';
       break;
     case ML_JOB_FIELD_TYPES.DATE:
-      ariaLabel = 'date type';
+      ariaLabel = intl.formatMessage({
+        id: 'xpack.ml.fieldTypeIcon.dateTypeAriaLabel',
+        defaultMessage: 'date type'
+      });
       iconClass = 'fa-clock-o';
       break;
     case ML_JOB_FIELD_TYPES.NUMBER:
-      ariaLabel = 'number type';
+      ariaLabel = intl.formatMessage({
+        id: 'xpack.ml.fieldTypeIcon.numberTypeAriaLabel',
+        defaultMessage: 'number type'
+      });
       iconChar = '#';
       break;
     case ML_JOB_FIELD_TYPES.GEO_POINT:
-      ariaLabel = 'geo_point type';
+      ariaLabel = intl.formatMessage({
+        id: 'xpack.ml.fieldTypeIcon.geoPointTypeAriaLabel',
+        defaultMessage: '{geoPointParam} type'
+      }, { geoPointParam: 'geo_point' });
       iconClass = 'fa-globe';
       break;
     case ML_JOB_FIELD_TYPES.KEYWORD:
-      ariaLabel = 'keyword type';
+      ariaLabel = intl.formatMessage({
+        id: 'xpack.ml.fieldTypeIcon.keywordTypeAriaLabel',
+        defaultMessage: 'keyword type'
+      });
       iconChar = 't';
       break;
     case ML_JOB_FIELD_TYPES.TEXT:
-      ariaLabel = 'text type';
+      ariaLabel = intl.formatMessage({
+        id: 'xpack.ml.fieldTypeIcon.textTypeAriaLabel',
+        defaultMessage: 'text type'
+      });
       iconClass = 'fa-file-text-o';
       break;
     case ML_JOB_FIELD_TYPES.IP:
-      ariaLabel = 'IP type';
+      ariaLabel = intl.formatMessage({
+        id: 'xpack.ml.fieldTypeIcon.ipTypeAriaLabel',
+        defaultMessage: 'IP type'
+      });
       iconClass = 'fa-laptop';
       break;
     case ML_JOB_FIELD_TYPES.UNKNOWN:
-      ariaLabel = 'Unknown type';
+      ariaLabel = intl.formatMessage({
+        id: 'xpack.ml.fieldTypeIcon.unknownTypeAriaLabel',
+        defaultMessage: 'Unknown type'
+      });
       iconChar = '?';
       break;
     default:
@@ -73,15 +98,22 @@ export function FieldTypeIcon({ tooltipEnabled = false, type }) {
     // to support having another component directly inside the tooltip anchor
     // see https://github.com/elastic/eui/issues/839
     return (
-      <EuiToolTip position="left" content={`${type} type`}>
+      <EuiToolTip
+        position="left"
+        content={<FormattedMessage
+          id="xpack.ml.fieldTypeIcon.fieldTypeTooltip"
+          defaultMessage="{type} type"
+          values={{ type }}
+        />}
+      >
         <FieldTypeIconContainer {...containerProps} />
       </EuiToolTip>
     );
   }
 
   return <FieldTypeIconContainer {...containerProps} />;
-}
-FieldTypeIcon.propTypes = {
+});
+FieldTypeIcon.WrappedComponent.propTypes = {
   tooltipEnabled: PropTypes.bool,
   type: PropTypes.string
 };

x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.test.js

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount, shallow } from 'enzyme';
+import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 import React from 'react';
 
 import { FieldTypeIcon } from './field_type_icon';
@@ -13,22 +13,22 @@ import { ML_JOB_FIELD_TYPES } from '../../../common/constants/field_types';
 describe('FieldTypeIcon', () => {
 
   test(`don't render component when type is undefined`, () => {
-    const wrapper = shallow(<FieldTypeIcon />);
+    const wrapper = shallowWithIntl(<FieldTypeIcon.WrappedComponent />);
     expect(wrapper.isEmptyRender()).toBeTruthy();
   });
 
   test(`don't render component when type doesn't match a field type`, () => {
-    const wrapper = shallow(<FieldTypeIcon type="foo" />);
+    const wrapper = shallowWithIntl(<FieldTypeIcon.WrappedComponent type="foo" />);
     expect(wrapper.isEmptyRender()).toBeTruthy();
   });
 
   test(`render component when type matches a field type`, () => {
-    const wrapper = shallow(<FieldTypeIcon type={ML_JOB_FIELD_TYPES.KEYWORD} />);
+    const wrapper = shallowWithIntl(<FieldTypeIcon.WrappedComponent type={ML_JOB_FIELD_TYPES.KEYWORD} />);
     expect(wrapper).toMatchSnapshot();
   });
 
   test(`render with tooltip and test hovering`, () => {
-    const wrapper = mount(<FieldTypeIcon type={ML_JOB_FIELD_TYPES.KEYWORD} tooltipEnabled={true} />);
+    const wrapper = mountWithIntl(<FieldTypeIcon.WrappedComponent type={ML_JOB_FIELD_TYPES.KEYWORD} tooltipEnabled={true} />);
     const container = wrapper.find({ className: 'field-type-icon-container' });
 
     expect(wrapper.find('EuiToolTip').children()).toHaveLength(1);
@@ -41,7 +41,7 @@ describe('FieldTypeIcon', () => {
   });
 
   test(`update component`, () => {
-    const wrapper = shallow(<FieldTypeIcon />);
+    const wrapper = shallowWithIntl(<FieldTypeIcon.WrappedComponent />);
     expect(wrapper.isEmptyRender()).toBeTruthy();
     wrapper.setProps({ type: ML_JOB_FIELD_TYPES.IP });
     expect(wrapper).toMatchSnapshot();

x-pack/plugins/ml/public/components/field_type_icon/field_type_icon_directive.js

@@ -10,6 +10,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import { FieldTypeIcon } from './field_type_icon.js';
+import { I18nProvider } from '@kbn/i18n/react';
 
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
@@ -34,7 +35,9 @@ module.directive('mlFieldTypeIcon', function () {
         };
 
         ReactDOM.render(
-          React.createElement(FieldTypeIcon, props),
+          <I18nProvider>
+            {React.createElement(FieldTypeIcon, props)}
+          </I18nProvider>,
           element[0]
         );
       }

x-pack/plugins/ml/public/components/form_filter_input/form_filter_input.html

@@ -2,7 +2,7 @@
 <input
   class="form-control ml-filter-input-left-icon"
   type="text"
-  aria-label="{{placeholder}}"
+  aria-label="{{ariaLabel}}"
   placeholder="{{placeholder}}"
   ng-model="filter"
   ng-change="filterChanged()" />
@@ -11,7 +11,10 @@
     <i class='fa fa-spinner fa-spin'></i>
   </div>
   <div ng-show="filterIcon===0">
-    <a aria-label="Clear filter" ng-click="clearFilter()">
+    <a
+      aria-label="{{ ::'xpack.ml.formFilterInput.clearFilterAriaLabel' | i18n: {defaultMessage: 'Clear filter'} }}"
+      ng-click="clearFilter()"
+    >
       <i class="fa fa-times-circle"></i>
     </a>
   </div>

x-pack/plugins/ml/public/components/form_filter_input/form_filter_input_directive.js

@@ -12,7 +12,7 @@ import angular from 'angular';
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
 
-module.directive('mlFormFilterInput', function () {
+module.directive('mlFormFilterInput', function (i18n) {
   return {
     scope: {
       placeholder: '@?',
@@ -25,7 +25,15 @@ module.directive('mlFormFilterInput', function () {
     replace: false,
     template,
     link(scope) {
-      scope.placeholder = angular.isDefined(scope.placeholder) ? scope.placeholder : 'Filter';
+      const placeholderIsDefined = angular.isDefined(scope.placeholder);
+
+      scope.placeholder = placeholderIsDefined
+        ? scope.placeholder
+        : i18n('xpack.ml.formFilterInput.filterPlaceholder', { defaultMessage: 'Filter' });
+
+      scope.ariaLabel = placeholderIsDefined
+        ? scope.placeholder
+        : i18n('xpack.ml.formFilterInput.filterAriaLabel', { defaultMessage: 'Filter' });
     }
   };
 });

x-pack/plugins/ml/public/components/full_time_range_selector/full_time_range_selector.html

@@ -3,7 +3,10 @@
   type="button"
   ng-disabled="disabled"
   class="euiButton euiButton--primary euiButton--small euiButton--fill">
-  <span class="euiButton__content">
-    Use full {{indexPattern.title}} data
-  </span>
+    <span
+      class="euiButton__content"
+      i18n-id="xpack.ml.fullTimeRangeSelector.useFullDataButtonLabel"
+      i18n-default-message="Use full {indexPatternTitle} data"
+      i18n-values="{ indexPatternTitle: indexPattern.title }"
+    ></span>
 </button>

x-pack/plugins/ml/public/components/influencers_list/influencers_list.js

@@ -20,6 +20,7 @@ import {
   EuiTitle,
   EuiToolTip
 } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import { abbreviateWholeNumber } from 'plugins/ml/formatters/abbreviate_whole_number';
 import { getSeverity } from 'plugins/ml/../common/util/anomaly_utils';
@@ -28,8 +29,20 @@ import { getSeverity } from 'plugins/ml/../common/util/anomaly_utils';
 function getTooltipContent(maxScoreLabel, totalScoreLabel) {
   return (
     <React.Fragment>
-      <p>Maximum anomaly score: {maxScoreLabel}</p>
-      <p>Total anomaly score: {totalScoreLabel}</p>
+      <p>
+        <FormattedMessage
+          id="xpack.ml.influencersList.maxAnomalyScoreTooltipDescription"
+          defaultMessage="Maximum anomaly score: {maxScoreLabel}"
+          values={{ maxScoreLabel }}
+        />
+      </p>
+      <p>
+        <FormattedMessage
+          id="xpack.ml.influencersList.totalAnomalyScoreTooltipDescription"
+          defaultMessage="Total anomaly score: {totalScoreLabel}"
+          values={{ totalScoreLabel }}
+        />
+      </p>
     </React.Fragment>
   );
 }
@@ -124,7 +137,12 @@ export function InfluencersList({ influencers }) {
         <EuiFlexItem grow={false}>
           <EuiSpacer size="xxl" />
           <EuiText>
-            <h4>No influencers found</h4>
+            <h4>
+              <FormattedMessage
+                id="xpack.ml.influencersList.noInfluencersFoundTitle"
+                defaultMessage="No influencers found"
+              />
+            </h4>
           </EuiText>
         </EuiFlexItem>
       </EuiFlexGroup>