[i18n] Translate ML - components - anomaly controls (#28674)

* Translate ml -> components -> controls

* Fix id name

* Resolve review comments

* Resolve review comments

x-pack/plugins/ml/public/components/controls/checkbox_showcharts/checkbox_showcharts.js

@@ -16,6 +16,7 @@ import {
 } from '@elastic/eui';
 
 import makeId from '@elastic/eui/lib/components/form/form_row/make_id';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 // This service will be populated by the corresponding angularjs based one.
 export const mlCheckboxShowChartsService = {
@@ -50,7 +51,10 @@ class CheckboxShowCharts extends Component {
     return (
       <EuiCheckbox
         id={makeId()}
-        label="Show charts"
+        label={<FormattedMessage
+          id="xpack.ml.controls.checkboxShowCharts.showChartsCheckboxLabel"
+          defaultMessage="Show charts"
+        />}
         checked={this.state.checked}
         onChange={this.onChange}
       />

x-pack/plugins/ml/public/components/controls/select_interval/select_interval.js

@@ -16,12 +16,26 @@ import {
   EuiSelect
 } from '@elastic/eui';
 
+import { i18n } from '@kbn/i18n';
+
 
 const OPTIONS = [
-  { value: 'auto', text: 'Auto' },
+  {
-  { value: 'hour', text: '1 hour' },
+    value: 'auto',
-  { value: 'day', text: '1 day' },
+    text: i18n.translate('xpack.ml.controls.selectInterval.autoLabel', { defaultMessage: 'Auto' })
-  { value: 'second', text: 'Show all' }
+  },
+  {
+    value: 'hour',
+    text: i18n.translate('xpack.ml.controls.selectInterval.hourLabel', { defaultMessage: '1 hour' })
+  },
+  {
+    value: 'day',
+    text: i18n.translate('xpack.ml.controls.selectInterval.dayLabel', { defaultMessage: '1 day' })
+  },
+  {
+    value: 'second',
+    text: i18n.translate('xpack.ml.controls.selectInterval.showAllLabel', { defaultMessage: 'Show all' })
+  }
 ];
 
 function optionValueToInterval(value) {

x-pack/plugins/ml/public/components/controls/select_interval/select_interval_directive.js

@@ -14,10 +14,13 @@ const module = uiModules.get('apps/ml', ['react']);
 
 import { SelectInterval, mlSelectIntervalService } from './select_interval';
 
-module.service('mlSelectIntervalService', function (Private) {
+module.service('mlSelectIntervalService', function (Private, i18n) {
   const stateFactory = Private(stateFactoryProvider);
   this.state = mlSelectIntervalService.state = stateFactory('mlSelectInterval', {
-    interval: { display: 'Auto', val: 'auto' }
+    interval: {
+      display: i18n('xpack.ml.controls.selectInterval.autoInitLabel', { defaultMessage: 'Auto' }),
+      val: 'auto'
+    }
   });
   mlSelectIntervalService.initialized = true;
 })

x-pack/plugins/ml/public/components/controls/select_severity/select_severity.js

@@ -12,6 +12,8 @@
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
 import React, { Component, Fragment } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import {
   EuiHealth,
@@ -22,19 +24,39 @@ import {
 
 import { getSeverityColor } from '../../../../common/util/anomaly_utils';
 
+const warningLabel = i18n.translate('xpack.ml.controls.selectSeverity.warningLabel', { defaultMessage: 'warning' });
+const minorLabel = i18n.translate('xpack.ml.controls.selectSeverity.minorLabel', { defaultMessage: 'minor' });
+const majorLabel = i18n.translate('xpack.ml.controls.selectSeverity.majorLabel', { defaultMessage: 'major' });
+const criticalLabel = i18n.translate('xpack.ml.controls.selectSeverity.criticalLabel', { defaultMessage: 'critical' });
 
 const optionsMap = {
-  'warning': 0,
+  [warningLabel]: 0,
-  'minor': 25,
+  [minorLabel]: 25,
-  'major': 50,
+  [majorLabel]: 50,
-  'critical': 75,
+  [criticalLabel]: 75,
 };
 
 export const SEVERITY_OPTIONS = [
-  { val: 0, display: 'warning', color: getSeverityColor(0) },
+  {
-  { val: 25, display: 'minor', color: getSeverityColor(25) },
+    val: 0,
-  { val: 50, display: 'major', color: getSeverityColor(50) },
+    display: warningLabel,
-  { val: 75, display: 'critical', color: getSeverityColor(75) },
+    color: getSeverityColor(0)
+  },
+  {
+    val: 25,
+    display: minorLabel,
+    color: getSeverityColor(25)
+  },
+  {
+    val: 50,
+    display: majorLabel,
+    color: getSeverityColor(50)
+  },
+  {
+    val: 75,
+    display: criticalLabel,
+    color: getSeverityColor(75)
+  },
 ];
 
 function optionValueToThreshold(value) {
@@ -112,7 +134,13 @@ class SelectSeverity extends Component {
           </EuiHealth>
           <EuiSpacer size="xs" />
           <EuiText size="xs" color="subdued">
-            <p className="euiTextColor--subdued">{`score ${val} and above`}</p>
+            <p className="euiTextColor--subdued">
+              <FormattedMessage
+                id="xpack.ml.controls.selectSeverity.scoreDetailsDescription"
+                defaultMessage="score {value} and above"
+                values={{ value: val }}
+              />
+            </p>
           </EuiText>
         </Fragment>
       ),

x-pack/plugins/ml/public/components/controls/select_severity/select_severity.test.js

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { SelectSeverity } from './select_severity';
 
 
@@ -22,7 +22,7 @@ const severityService = {
 describe('SelectSeverity', () => {
 
   test('creates correct severity options and initial selected value', () => {
-    const wrapper = shallow(<SelectSeverity mlSelectSeverityService={severityService}/>);
+    const wrapper = shallowWithIntl(<SelectSeverity mlSelectSeverityService={severityService}/>);
     const options = wrapper.props().options;
     const defaultSelectedValue = wrapper.props().valueOfSelected;
 
@@ -64,7 +64,7 @@ describe('SelectSeverity', () => {
   });
 
   test('state for currently selected value is updated correctly on click', () => {
-    const wrapper = shallow(<SelectSeverity mlSelectSeverityService={severityService} />);
+    const wrapper = shallowWithIntl(<SelectSeverity mlSelectSeverityService={severityService} />);
 
     const defaultSelectedValue = wrapper.props().valueOfSelected;
     expect(defaultSelectedValue).toBe('warning');

x-pack/plugins/ml/public/components/controls/select_severity/select_severity_directive.js

@@ -13,11 +13,15 @@ import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml', ['react']);
 
 import { SelectSeverity, mlSelectSeverityService } from './select_severity';
+import { injectI18nProvider } from '@kbn/i18n/react';
 
-module.service('mlSelectSeverityService', function (Private) {
+module.service('mlSelectSeverityService', function (Private, i18n) {
   const stateFactory = Private(stateFactoryProvider);
   this.state = mlSelectSeverityService.state = stateFactory('mlSelectSeverity', {
-    threshold: { display: 'warning', val: 0 }
+    threshold: {
+      display: i18n('xpack.ml.controls.selectSeverity.threshold.warningLabel', { defaultMessage: 'warning' }),
+      val: 0
+    }
   });
   mlSelectSeverityService.intialized = true;
 })
@@ -25,7 +29,7 @@ module.service('mlSelectSeverityService', function (Private) {
     const reactDirective = $injector.get('reactDirective');
 
     return reactDirective(
-      SelectSeverity,
+      injectI18nProvider(SelectSeverity),
       undefined,
       { restrict: 'E' },
     );