[i18n] Translate ML - time series explorer

x-pack/plugins/ml/public/timeseriesexplorer/__tests__/timeseries_chart_directive.js

@@ -36,7 +36,7 @@ describe('ML - <ml-timeseries-chart>', () => {
     document.getElementsByTagName('body')[0].append(mockClassedElement);
 
     // spy the TimeseriesChart component's unmount method to be able to test if it was called
-    const componentWillUnmountSpy = sinon.spy(TimeseriesChart.prototype, 'componentWillUnmount');
+    const componentWillUnmountSpy = sinon.spy(TimeseriesChart.WrappedComponent.prototype, 'componentWillUnmount');
 
     $element = $compile('<ml-timeseries-chart show-forecast="true" />')($scope);
     const scope = $element.isolateScope();

x-pack/plugins/ml/public/timeseriesexplorer/components/annotation_description_list/index.test.tsx

@@ -6,9 +6,9 @@
 
 import mockAnnotations from '../../../components/annotations_table/__mocks__/mock_annotations.json';
 
-import { shallow } from 'enzyme';
 import moment from 'moment-timezone';
 import React from 'react';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 
 import { AnnotationDescriptionList } from './index';
 
@@ -21,7 +21,12 @@ describe('AnnotationDescriptionList', () => {
   });
 
   test('Initialization with annotation.', () => {
-    const wrapper = shallow(<AnnotationDescriptionList annotation={mockAnnotations[0]} />);
+    const wrapper = shallowWithIntl(
+      <AnnotationDescriptionList.WrappedComponent
+        annotation={mockAnnotations[0]}
+        intl={null as any}
+      />
+    );
     expect(wrapper).toMatchSnapshot();
   });
 });

x-pack/plugins/ml/public/timeseriesexplorer/components/annotation_description_list/index.tsx

@@ -13,47 +13,70 @@ import React from 'react';
 
 import { EuiDescriptionList } from '@elastic/eui';
 
+import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import { Annotation } from '../../../../common/types/annotations';
 import { formatHumanReadableDateTimeSeconds } from '../../../util/date_utils';
 
 interface Props {
   annotation: Annotation;
+  intl: InjectedIntl;
 }
 
-export const AnnotationDescriptionList: React.SFC<Props> = ({ annotation }) => {
+export const AnnotationDescriptionList = injectI18n(({ annotation, intl }: Props) => {
   const listItems = [
     {
-      title: 'Job ID',
+      title: intl.formatMessage({
+        id: 'xpack.ml.timeSeriesExplorer.annotationDescriptionList.jobIdTitle',
+        defaultMessage: 'Job ID',
+      }),
       description: annotation.job_id,
     },
     {
-      title: 'Start',
+      title: intl.formatMessage({
+        id: 'xpack.ml.timeSeriesExplorer.annotationDescriptionList.startTitle',
+        defaultMessage: 'Start',
+      }),
       description: formatHumanReadableDateTimeSeconds(annotation.timestamp),
     },
   ];
 
   if (annotation.end_timestamp !== undefined) {
     listItems.push({
-      title: 'End',
+      title: intl.formatMessage({
+        id: 'xpack.ml.timeSeriesExplorer.annotationDescriptionList.endTitle',
+        defaultMessage: 'End',
+      }),
       description: formatHumanReadableDateTimeSeconds(annotation.end_timestamp),
     });
   }
 
   if (annotation.create_time !== undefined && annotation.modified_time !== undefined) {
     listItems.push({
-      title: 'Created',
+      title: intl.formatMessage({
+        id: 'xpack.ml.timeSeriesExplorer.annotationDescriptionList.createdTitle',
+        defaultMessage: 'Created',
+      }),
       description: formatHumanReadableDateTimeSeconds(annotation.create_time),
     });
     listItems.push({
-      title: 'Created by',
+      title: intl.formatMessage({
+        id: 'xpack.ml.timeSeriesExplorer.annotationDescriptionList.createdByTitle',
+        defaultMessage: 'Created by',
+      }),
       description: annotation.create_username,
     });
     listItems.push({
-      title: 'Last modified',
+      title: intl.formatMessage({
+        id: 'xpack.ml.timeSeriesExplorer.annotationDescriptionList.lastModifiedTitle',
+        defaultMessage: 'Last modified',
+      }),
       description: formatHumanReadableDateTimeSeconds(annotation.modified_time),
     });
     listItems.push({
-      title: 'Modified by',
+      title: intl.formatMessage({
+        id: 'xpack.ml.timeSeriesExplorer.annotationDescriptionList.modifiedByTitle',
+        defaultMessage: 'Modified by',
+      }),
       description: annotation.modified_username,
     });
   }
@@ -65,4 +88,4 @@ export const AnnotationDescriptionList: React.SFC<Props> = ({ annotation }) => {
       listItems={listItems}
     />
   );
-};
+});

x-pack/plugins/ml/public/timeseriesexplorer/components/annotation_flyout/__snapshots__/index.test.tsx.snap

@@ -20,13 +20,16 @@ exports[`AnnotationFlyout Initialization. 1`] = `
       <h2
         id="mlAnnotationFlyoutTitle"
       >
-        Edit
-         annotation
+        <FormattedMessage
+          defaultMessage="Edit annotation"
+          id="xpack.ml.timeSeriesExplorer.annotationFlyout.editAnnotationTitle"
+          values={Object {}}
+        />
       </h2>
     </EuiTitle>
   </EuiFlyoutHeader>
   <EuiFlyoutBody>
-    <Component
+    <InjectIntl(Component)
       annotation={
         Object {
           "_id": "KCCkDWgB_ZdQ1MFDSYPi",
@@ -49,7 +52,13 @@ exports[`AnnotationFlyout Initialization. 1`] = `
       describedByIds={Array []}
       fullWidth={true}
       hasEmptyLabelSpace={false}
-      label="Annotation text"
+      label={
+        <FormattedMessage
+          defaultMessage="Annotation text"
+          id="xpack.ml.timeSeriesExplorer.annotationFlyout.annotationTextLabel"
+          values={Object {}}
+        />
+      }
     >
       <EuiTextArea
         fullWidth={true}
@@ -83,7 +92,11 @@ exports[`AnnotationFlyout Initialization. 1`] = `
           onClick={[MockFunction]}
           type="button"
         >
-          Cancel
+          <FormattedMessage
+            defaultMessage="Cancel"
+            id="xpack.ml.timeSeriesExplorer.annotationFlyout.cancelButtonLabel"
+            values={Object {}}
+          />
         </EuiButtonEmpty>
       </EuiFlexItem>
       <EuiFlexItem
@@ -96,7 +109,11 @@ exports[`AnnotationFlyout Initialization. 1`] = `
           onClick={[Function]}
           type="button"
         >
-          Delete
+          <FormattedMessage
+            defaultMessage="Delete"
+            id="xpack.ml.timeSeriesExplorer.annotationFlyout.deleteButtonLabel"
+            values={Object {}}
+          />
         </EuiButtonEmpty>
       </EuiFlexItem>
       <EuiFlexItem
@@ -111,7 +128,11 @@ exports[`AnnotationFlyout Initialization. 1`] = `
           onClick={[Function]}
           type="button"
         >
-          Update
+          <FormattedMessage
+            defaultMessage="Update"
+            id="xpack.ml.timeSeriesExplorer.annotationFlyout.updateButtonLabel"
+            values={Object {}}
+          />
         </EuiButton>
       </EuiFlexItem>
     </EuiFlexGroup>

x-pack/plugins/ml/public/timeseriesexplorer/components/annotation_flyout/index.test.tsx

@@ -6,8 +6,8 @@
 
 import mockAnnotations from '../../../components/annotations_table/__mocks__/mock_annotations.json';
 
-import { shallow } from 'enzyme';
 import React from 'react';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 
 import { AnnotationFlyout } from './index';
 
@@ -21,7 +21,7 @@ describe('AnnotationFlyout', () => {
       saveAction: jest.fn(),
     };
 
-    const wrapper = shallow(<AnnotationFlyout {...props} />);
+    const wrapper = shallowWithIntl(<AnnotationFlyout {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
 });

x-pack/plugins/ml/public/timeseriesexplorer/components/annotation_flyout/index.tsx

@@ -25,6 +25,8 @@ import { AnnotationDescriptionList } from '../annotation_description_list';
 
 import { Annotation } from '../../../../common/types/annotations';
 
+import { FormattedMessage } from '@kbn/i18n/react';
+
 interface Props {
   annotation: Annotation;
   cancelAction: () => {};
@@ -43,19 +45,37 @@ export const AnnotationFlyout: React.SFC<Props> = ({
   const saveActionWrapper = () => saveAction(annotation);
   const deleteActionWrapper = () => deleteAction(annotation);
   const isExistingAnnotation = typeof annotation._id !== 'undefined';
-  const titlePrefix = isExistingAnnotation ? 'Edit' : 'Add';
-
   return (
     <EuiFlyout onClose={cancelAction} size="s" aria-labelledby="Add annotation">
       <EuiFlyoutHeader hasBorder>
         <EuiTitle size="s">
-          <h2 id="mlAnnotationFlyoutTitle">{titlePrefix} annotation</h2>
+          <h2 id="mlAnnotationFlyoutTitle">
+            {isExistingAnnotation ? (
+              <FormattedMessage
+                id="xpack.ml.timeSeriesExplorer.annotationFlyout.editAnnotationTitle"
+                defaultMessage="Edit annotation"
+              />
+            ) : (
+              <FormattedMessage
+                id="xpack.ml.timeSeriesExplorer.annotationFlyout.addAnnotationTitle"
+                defaultMessage="Add annotation"
+              />
+            )}
+          </h2>
         </EuiTitle>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
         <AnnotationDescriptionList annotation={annotation} />
         <EuiSpacer size="m" />
-        <EuiFormRow label="Annotation text" fullWidth>
+        <EuiFormRow
+          label={
+            <FormattedMessage
+              id="xpack.ml.timeSeriesExplorer.annotationFlyout.annotationTextLabel"
+              defaultMessage="Annotation text"
+            />
+          }
+          fullWidth
+        >
           <EuiTextArea
             fullWidth
             isInvalid={annotation.annotation === ''}
@@ -69,19 +89,35 @@ export const AnnotationFlyout: React.SFC<Props> = ({
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
             <EuiButtonEmpty iconType="cross" onClick={cancelAction} flush="left">
-              Cancel
+              <FormattedMessage
+                id="xpack.ml.timeSeriesExplorer.annotationFlyout.cancelButtonLabel"
+                defaultMessage="Cancel"
+              />
             </EuiButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             {isExistingAnnotation && (
               <EuiButtonEmpty color="danger" onClick={deleteActionWrapper}>
-                Delete
+                <FormattedMessage
+                  id="xpack.ml.timeSeriesExplorer.annotationFlyout.deleteButtonLabel"
+                  defaultMessage="Delete"
+                />
               </EuiButtonEmpty>
             )}
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButton fill isDisabled={annotation.annotation === ''} onClick={saveActionWrapper}>
-              {isExistingAnnotation ? 'Update' : 'Create'}
+              {isExistingAnnotation ? (
+                <FormattedMessage
+                  id="xpack.ml.timeSeriesExplorer.annotationFlyout.updateButtonLabel"
+                  defaultMessage="Update"
+                />
+              ) : (
+                <FormattedMessage
+                  id="xpack.ml.timeSeriesExplorer.annotationFlyout.createButtonLabel"
+                  defaultMessage="Create"
+                />
+              )}
             </EuiButton>
           </EuiFlexItem>
         </EuiFlexGroup>

x-pack/plugins/ml/public/timeseriesexplorer/components/delete_annotation_modal/index.js

@@ -14,6 +14,8 @@ import {
   EUI_MODAL_CONFIRM_BUTTON,
 } from '@elastic/eui';
 
+import { FormattedMessage } from '@kbn/i18n/react';
+
 export function DeleteAnnotationModal({
   cancelAction,
   deleteAction,
@@ -24,11 +26,20 @@ export function DeleteAnnotationModal({
       {isVisible === true &&
         <EuiOverlayMask>
           <EuiConfirmModal
-            title="Delete this annotation?"
+            title={<FormattedMessage
+              id="xpack.ml.timeSeriesExplorer.deleteAnnotationModal.deleteAnnotationTitle"
+              defaultMessage="Delete this annotation?"
+            />}
             onCancel={cancelAction}
             onConfirm={deleteAction}
-            cancelButtonText="Cancel"
-            confirmButtonText="Delete"
+            cancelButtonText={<FormattedMessage
+              id="xpack.ml.timeSeriesExplorer.deleteAnnotationModal.cancelButtonLabel"
+              defaultMessage="Cancel"
+            />}
+            confirmButtonText={<FormattedMessage
+              id="xpack.ml.timeSeriesExplorer.deleteAnnotationModal.deleteButtonLabel"
+              defaultMessage="Delete"
+            />}
             buttonColor="danger"
             defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
             className="eui-textBreakWord"

x-pack/plugins/ml/public/timeseriesexplorer/components/forecasting_modal/forecast_progress.js

@@ -25,6 +25,7 @@ import {
 
 import { ProgressIcon } from './progress_icon';
 import { PROGRESS_STATES } from './progress_states';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 
 export function ForecastProgress({
@@ -38,7 +39,12 @@ export function ForecastProgress({
           <EuiFlexGroup gutterSize="s" alignItems="center">
             <EuiFlexItem grow={false}>
               <EuiText size="xs">
-                <h3>Opening job...</h3>
+                <h3>
+                  <FormattedMessage
+                    id="xpack.ml.timeSeriesExplorer.forecastingModal.openingJobTitle"
+                    defaultMessage="Opening job…"
+                  />
+                </h3>
               </EuiText>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
@@ -53,7 +59,12 @@ export function ForecastProgress({
           <EuiFlexGroup gutterSize="s" alignItems="center">
             <EuiFlexItem grow={false}>
               <EuiText size="xs">
-                <h3>Running forecast...</h3>
+                <h3>
+                  <FormattedMessage
+                    id="xpack.ml.timeSeriesExplorer.forecastingModal.runningForecastTitle"
+                    defaultMessage="Running forecast…"
+                  />
+                </h3>
               </EuiText>
             </EuiFlexItem>
             {forecastProgress >= 0 &&
@@ -80,7 +91,12 @@ export function ForecastProgress({
           <EuiFlexGroup gutterSize="s" alignItems="center">
             <EuiFlexItem grow={false}>
               <EuiText size="xs">
-                <h3>Closing job...</h3>
+                <h3>
+                  <FormattedMessage
+                    id="xpack.ml.timeSeriesExplorer.forecastingModal.closingJobTitle"
+                    defaultMessage="Closing job…"
+                  />
+                </h3>
               </EuiText>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>