[ML] Localize ml components ( part 3 - anomaly controls )

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

@@ -10,7 +10,7 @@
  * React component for a checkbox element to toggle charts display.
  */
 import React, { Component } from 'react';
-
+import { injectI18n } from '@kbn/i18n/react';
 import {
   EuiCheckbox
 } from '@elastic/eui';
@@ -41,15 +41,22 @@ class CheckboxShowCharts extends Component {
   };
 
   render() {
+    const { intl } = this.props;
     return (
       <EuiCheckbox
         id={makeId()}
-        label="Show charts"
+        label={
+          intl.formatMessage({
+            id: 'xpack.ml.controls.checkboxShowChartsLabel',
+            defaultMessage: 'Show charts'
+          })
+        }
         checked={this.state.checked}
         onChange={this.onChange}
       />
     );
   }
 }
 
-export { CheckboxShowCharts };
+const withIntl = injectI18n(CheckboxShowCharts);
+export { withIntl as CheckboxShowCharts };

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

@@ -12,6 +12,8 @@ import { stateFactoryProvider } from 'plugins/ml/factories/state_factory';
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml', ['react']);
 
+import { injectI18nProvider } from '@kbn/i18n/react';
+
 import { CheckboxShowCharts } from './checkbox_showcharts';
 
 module.service('mlCheckboxShowChartsService', function (Private) {
@@ -25,7 +27,7 @@ module.service('mlCheckboxShowChartsService', function (Private) {
     const mlCheckboxShowChartsService = $injector.get('mlCheckboxShowChartsService');
 
     return reactDirective(
-      CheckboxShowCharts,
+      injectI18nProvider(CheckboxShowCharts),
       undefined,
       { restrict: 'E' },
       { mlCheckboxShowChartsService }

x-pack/plugins/ml/public/components/controls/controls_select/controls_select.html

@@ -1,11 +1,17 @@
-<label for="select{{identifier}}" class="kuiLabel">{{label}}:</label>
+<label class="kuiLabel"
+  for="select{{identifier}}"
+  i18n-id="xpack.ml.controls.controlsSelectLabel"
+  i18n-default-message="{label}:"
+  i18n-values="{ label: label }"
+>
+</label>
 <div class="dropdown-group" dropdown>
   <button id="select{{identifier}}" type="button" class="form-control dropdown-toggle" ng-class="{ 'dropdown-toggle-narrow': narrowStyle }" dropdown-toggle ng-disabled="disabled">
     <span><i ng-if="showIcons" class="fa fa-exclamation-triangle ml-icon-severity-{{selected.display}}"></i> {{selected.display}}</span> <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu">
     <li ng-repeat="option in options">
-      <a href="" ng-click="setOption(option)"><i ng-if="showIcons" class="fa fa-exclamation-triangle ml-icon-severity-{{option.display}}"></i> {{option.display}}</a>
+      <a href="" ng-click="setOption(option)"><i ng-if="showIcons" class="fa fa-exclamation-triangle ml-icon-severity-{{option.display}}"></i>{{option.display}}</a>
     </li>
   </ul>
 </div>

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

@@ -11,26 +11,42 @@
  */
 import _ from 'lodash';
 import React, { Component } from 'react';
+import { i18n } from '@kbn/i18n';
 
 import {
   EuiSelect
 } from '@elastic/eui';
 
 
-const OPTIONS = [
-  { value: 'auto', text: 'Auto' },
-  { value: 'hour', text: '1 hour' },
-  { value: 'day', text: '1 day' },
-  { value: 'second', text: 'Show all' }
-];
+const getIntervalOptions = () => {
+  const auto = i18n.translate('xpack.ml.controls.selectInterval.auto', {
+    defaultMessage: 'Auto',
+  });
+  const oneHour = i18n.translate('xpack.ml.controls.selectInterval.oneHour', {
+    defaultMessage: '1 Hour',
+  });
+  const oneDay = i18n.translate('xpack.ml.controls.selectInterval.oneDay', {
+    defaultMessage: '1 Day',
+  });
+  const showAll = i18n.translate('xpack.ml.controls.selectInterval.showAll', {
+    defaultMessage: 'Show all',
+  });
+
+  return [
+    { value: 'auto', text: auto },
+    { value: 'hour', text: oneHour },
+    { value: 'day', text: oneDay },
+    { value: 'second', text: showAll }
+  ];
+};
 
 function optionValueToInterval(value) {
   // Builds the corresponding interval object with the required display and val properties
   // from the specified value.
-  const option = OPTIONS.find(opt => (opt.value === value));
+  const option = getIntervalOptions().find(opt => (opt.value === value));
 
   // Default to auto if supplied value doesn't map to one of the options.
-  let interval = OPTIONS[0];
+  let interval = getIntervalOptions()[0];
   if (option !== undefined) {
     interval = { display: option.text, val: option.value };
   }
@@ -66,7 +82,7 @@ class SelectInterval extends Component {
   render() {
     return (
       <EuiSelect
-        options={OPTIONS}
+        options={getIntervalOptions()}
         className="ml-select-interval"
         value={this.state.value}
         onChange={this.onChange}
@@ -75,4 +91,4 @@ class SelectInterval extends Component {
   }
 }
 
-export { SelectInterval };
+export { SelectInterval, getIntervalOptions };

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

@@ -12,12 +12,13 @@ import { stateFactoryProvider } from 'plugins/ml/factories/state_factory';
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml', ['react']);
 
-import { SelectInterval } from './select_interval';
+import { SelectInterval, getIntervalOptions } from './select_interval';
 
 module.service('mlSelectIntervalService', function (Private) {
   const stateFactory = Private(stateFactoryProvider);
+  const autoInterval = getIntervalOptions()[0];
   this.state = stateFactory('mlSelectInterval', {
-    interval: { display: 'Auto', val: 'auto' }
+    interval: { display: autoInterval.text, val: autoInterval.value }
   });
 })
   .directive('mlSelectInterval', function ($injector) {

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

@@ -12,6 +12,8 @@
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 import React, { Component, Fragment } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import {
   EuiHealth,
@@ -30,20 +32,34 @@ const optionsMap = {
   'critical': 75,
 };
 
-const SEVERITY_OPTIONS = [
-  { val: 0, display: 'warning', color: getSeverityColor(0) },
-  { val: 25, display: 'minor', color: getSeverityColor(25) },
-  { val: 50, display: 'major', color: getSeverityColor(50) },
-  { val: 75, display: 'critical', color: getSeverityColor(75) },
-];
+const getSeverityOptions = () => {
+  const warning = i18n.translate('xpack.ml.controls.selectSeverity.warning', {
+    defaultMessage: 'warning',
+  });
+  const minor = i18n.translate('xpack.ml.controls.selectSeverity.minor', {
+    defaultMessage: 'minor',
+  });
+  const major = i18n.translate('xpack.ml.controls.selectSeverity.major', {
+    defaultMessage: 'major',
+  });
+  const critical = i18n.translate('xpack.ml.controls.selectSeverity.critical', {
+    defaultMessage: 'critical',
+  });
+  return [
+    { val: 0, display: warning, color: getSeverityColor(0) },
+    { val: 25, display: minor, color: getSeverityColor(25) },
+    { val: 50, display: major, color: getSeverityColor(50) },
+    { val: 75, display: critical, color: getSeverityColor(75) },
+  ];
+};
 
 function optionValueToThreshold(value) {
   // Get corresponding threshold object with required display and val properties from the specified value.
-  let threshold = SEVERITY_OPTIONS.find(opt => (opt.val === value));
+  let threshold = getSeverityOptions().find(opt => (opt.val === value));
 
   // Default to warning if supplied value doesn't map to one of the options.
   if (threshold === undefined) {
-    threshold = SEVERITY_OPTIONS[0];
+    threshold = getSeverityOptions()[0];
   }
 
   return threshold;
@@ -59,7 +75,7 @@ class SelectSeverity extends Component {
     }
 
     this.state = {
-      valueDisplay: SEVERITY_OPTIONS[0].display,
+      valueDisplay: getSeverityOptions()[0].display,
     };
   }
 
@@ -70,7 +86,7 @@ class SelectSeverity extends Component {
       const thresholdValue = _.get(thresholdState, 'val', 0);
       const threshold = optionValueToThreshold(thresholdValue);
       // set initial selected option equal to threshold value
-      const selectedOption = SEVERITY_OPTIONS.find(opt => (opt.val === threshold.val));
+      const selectedOption = getSeverityOptions().find(opt => (opt.val === threshold.val));
       this.mlSelectSeverityService.state.set('threshold', threshold);
       this.setState({ valueDisplay: selectedOption.display, });
     }
@@ -90,7 +106,7 @@ class SelectSeverity extends Component {
   }
 
   getOptions = () =>
-    SEVERITY_OPTIONS.map(({ color, display, val }) => ({
+    getSeverityOptions().map(({ color, display, val }) => ({
       value: display,
       inputDisplay: (
         <Fragment>
@@ -106,7 +122,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.scoreDetailsDropDownDescription"
+                defaultMessage="score {score} and above"
+                values={{ score: val }}
+              />
+            </p>
           </EuiText>
         </Fragment>
       ),
@@ -140,4 +162,4 @@ SelectSeverity.defaultProps = {
   classNames: ''
 };
 
-export { SelectSeverity };
+export { SelectSeverity, getSeverityOptions };

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

@@ -12,12 +12,14 @@ import { stateFactoryProvider } from 'plugins/ml/factories/state_factory';
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml', ['react']);
 
-import { SelectSeverity } from './select_severity';
+import { SelectSeverity, getSeverityOptions } from './select_severity';
 
 module.service('mlSelectSeverityService', function (Private) {
   const stateFactory = Private(stateFactoryProvider);
+  const warningSeverity = getSeverityOptions()[0];
+
   this.state = stateFactory('mlSelectSeverity', {
-    threshold: { display: 'warning', val: 0 }
+    threshold: { display: warningSeverity.display, val: warningSeverity.val }
   });
 })
   .directive('mlSelectSeverity', function ($injector) {