Feature/translate monitoring apm and chart

x-pack/plugins/monitoring/public/components/apm/instance/status.js

@@ -10,8 +10,10 @@ import { SummaryStatus } from '../../summary_status';
 import { ApmStatusIcon } from '../status_icon';
 import { formatMetric } from '../../../lib/format_number';
 import { formatTimestampToDuration } from '../../../../common';
+import { CALCULATE_DURATION_SINCE } from '../../../../common/constants';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
-export function Status({ stats }) {
+function StatusUI({ stats, intl }) {
   const {
     name,
     output,
@@ -22,35 +24,62 @@ export function Status({ stats }) {
 
   const metrics = [
     {
-      label: 'Name',
+      label: intl.formatMessage({
+        id: 'xpack.monitoring.apm.instance.status.nameLabel',
+        defaultMessage: 'Name',
+      }),
       value: name,
       dataTestSubj: 'name'
     },
     {
-      label: 'Output',
+      label: intl.formatMessage({
+        id: 'xpack.monitoring.apm.instance.status.outputLabel',
+        defaultMessage: 'Output',
+      }),
       value: output,
       dataTestSubj: 'output'
     },
     {
-      label: 'Version',
+      label: intl.formatMessage({
+        id: 'xpack.monitoring.apm.instance.status.versionLabel',
+        defaultMessage: 'Version',
+      }),
       value: version,
       dataTestSubj: 'version'
     },
     {
-      label: 'Uptime',
+      label: intl.formatMessage({
+        id: 'xpack.monitoring.apm.instance.status.uptimeLabel',
+        defaultMessage: 'Uptime',
+      }),
       value: formatMetric(uptime, 'time_since'),
       dataTestSubj: 'uptime'
     },
     {
-      label: 'Last Event',
-      value: formatTimestampToDuration(+moment(timeOfLastEvent), 'since') + ' ago',
+      label: intl.formatMessage({
+        id: 'xpack.monitoring.apm.instance.status.lastEventLabel',
+        defaultMessage: 'Last Event',
+      }),
+      value: intl.formatMessage({
+        id: 'xpack.monitoring.apm.instance.status.lastEventDescription',
+        defaultMessage: '{timeOfLastEvent} ago' }, {
+        timeOfLastEvent: formatTimestampToDuration(+moment(timeOfLastEvent), CALCULATE_DURATION_SINCE)
+      }),
       dataTestSubj: 'timeOfLastEvent',
     }
   ];
 
   const IconComponent = ({ status }) => (
     <Fragment>
-      Status: <ApmStatusIcon status={status} />
+      <FormattedMessage
+        id="xpack.monitoring.apm.instance.statusDescription"
+        defaultMessage="Status: {apmStatusIcon}"
+        values={{
+          apmStatusIcon: (
+            <ApmStatusIcon status={status} />
+          )
+        }}
+      />
     </Fragment>
   );
 
@@ -62,3 +91,5 @@ export function Status({ stats }) {
     />
   );
 }
+
+export const Status = injectI18n(StatusUI);

x-pack/plugins/monitoring/public/components/apm/instances/instances.js

@@ -16,18 +16,62 @@ import { Status } from './status';
 import { SORT_ASCENDING, SORT_DESCENDING, TABLE_ACTION_UPDATE_FILTER } from '../../../../common/constants';
 import { formatMetric } from '../../../lib/format_number';
 import { formatTimestampToDuration } from '../../../../common';
+import { i18n } from '@kbn/i18n';
+import { injectI18n } from '@kbn/i18n/react';
 
 
 const filterFields = [ 'name', 'type', 'version', 'output' ];
 const columns = [
-  { title: 'Name', sortKey: 'name', sortOrder: SORT_ASCENDING },
-  { title: 'Output Enabled', sortKey: 'output' },
-  { title: 'Total Events Rate', sortKey: 'total_events_rate', secondarySortOrder: SORT_DESCENDING },
-  { title: 'Bytes Sent Rate', sortKey: 'bytes_sent_rate' },
-  { title: 'Output Errors', sortKey: 'errors' },
-  { title: 'Last Event', sortKey: 'time_of_last_event' },
-  { title: 'Allocated Memory', sortKey: 'memory' },
-  { title: 'Version', sortKey: 'version' },
+  {
+    title: i18n.translate('xpack.monitoring.apm.instances.nameTitle', {
+      defaultMessage: 'Name'
+    }),
+    sortKey: 'name',
+    sortOrder: SORT_ASCENDING
+  },
+  {
+    title: i18n.translate('xpack.monitoring.apm.instances.outputEnabledTitle', {
+      defaultMessage: 'Output Enabled'
+    }),
+    sortKey: 'output'
+  },
+  {
+    title: i18n.translate('xpack.monitoring.apm.instances.totalEventsRateTitle', {
+      defaultMessage: 'Total Events Rate'
+    }),
+    sortKey: 'total_events_rate',
+    secondarySortOrder: SORT_DESCENDING
+  },
+  {
+    title: i18n.translate('xpack.monitoring.apm.instances.bytesSentRateTitle', {
+      defaultMessage: 'Bytes Sent Rate'
+    }),
+    sortKey: 'bytes_sent_rate'
+  },
+  {
+    title: i18n.translate('xpack.monitoring.apm.instances.outputErrorsTitle', {
+      defaultMessage: 'Output Errors'
+    }),
+    sortKey: 'errors'
+  },
+  {
+    title: i18n.translate('xpack.monitoring.apm.instances.lastEventTitle', {
+      defaultMessage: 'Last Event'
+    }),
+    sortKey: 'time_of_last_event'
+  },
+  {
+    title: i18n.translate('xpack.monitoring.apm.instances.allocatedMemoryTitle', {
+      defaultMessage: 'Allocated Memory'
+    }),
+    sortKey: 'memory'
+  },
+  {
+    title: i18n.translate('xpack.monitoring.apm.instances.versionTitle', {
+      defaultMessage: 'Version'
+    }),
+    sortKey: 'version'
+  },
 ];
 const instanceRowFactory = () => {
   return function KibanaRow(props) {
@@ -77,7 +121,7 @@ const instanceRowFactory = () => {
   };
 };
 
-export function ApmServerInstances({ apms }) {
+function ApmServerInstancesUI({ apms, intl }) {
   const {
     pageIndex,
     filterText,
@@ -97,11 +141,16 @@ export function ApmServerInstances({ apms }) {
         sortKey={sortKey}
         sortOrder={sortOrder}
         onNewState={onNewState}
-        placeholder="Filter Instances..."
+        placeholder={intl.formatMessage({
+          id: 'xpack.monitoring.apm.instances.filterInstancesPlaceholder',
+          defaultMessage: 'Filter Instances…'
+        })}
         filterFields={filterFields}
         columns={columns}
         rowComponent={instanceRowFactory()}
       />
     </div>
   );
 }
+
+export const ApmServerInstances = injectI18n(ApmServerInstancesUI);

x-pack/plugins/monitoring/public/components/apm/instances/status.js

@@ -10,8 +10,10 @@ import { SummaryStatus } from '../../summary_status';
 import { ApmStatusIcon } from '../status_icon';
 import { formatMetric } from '../../../lib/format_number';
 import { formatTimestampToDuration } from '../../../../common';
+import { CALCULATE_DURATION_SINCE } from '../../../../common/constants';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
-export function Status({ stats }) {
+function StatusUI({ stats, intl }) {
   const {
     apms: {
       total
@@ -22,25 +24,46 @@ export function Status({ stats }) {
 
   const metrics = [
     {
-      label: 'Servers',
+      label: intl.formatMessage({
+        id: 'xpack.monitoring.apm.instances.status.serversLabel',
+        defaultMessage: 'Servers',
+      }),
       value: total,
       dataTestSubj: 'total'
     },
     {
-      label: 'Total Events',
+      label: intl.formatMessage({
+        id: 'xpack.monitoring.apm.instances.status.totalEventsLabel',
+        defaultMessage: 'Total Events',
+      }),
       value: formatMetric(totalEvents, '0.[0]a'),
       dataTestSubj: 'totalEvents'
     },
     {
-      label: 'Last Event',
-      value: formatTimestampToDuration(+moment(timeOfLastEvent), 'since') + ' ago',
+      label: intl.formatMessage({
+        id: 'xpack.monitoring.apm.instances.status.lastEventLabel',
+        defaultMessage: 'Last Event',
+      }),
+      value: intl.formatMessage({
+        id: 'xpack.monitoring.apm.instances.status.lastEventDescription',
+        defaultMessage: '{timeOfLastEvent} ago' }, {
+        timeOfLastEvent: formatTimestampToDuration(+moment(timeOfLastEvent), CALCULATE_DURATION_SINCE)
+      }),
       dataTestSubj: 'timeOfLastEvent',
     }
   ];
 
   const IconComponent = ({ status }) => (
     <Fragment>
-      Status: <ApmStatusIcon status={status} />
+      <FormattedMessage
+        id="xpack.monitoring.apm.instances.statusDescription"
+        defaultMessage="Status: {apmStatusIcon}"
+        values={{
+          apmStatusIcon: (
+            <ApmStatusIcon status={status} />
+          )
+        }}
+      />
     </Fragment>
   );
 
@@ -52,3 +75,5 @@ export function Status({ stats }) {
     />
   );
 }
+
+export const Status = injectI18n(StatusUI);

x-pack/plugins/monitoring/public/components/apm/status_icon.js

@@ -6,8 +6,9 @@
 
 import React from 'react';
 import { StatusIcon } from 'plugins/monitoring/components/status_icon';
+import { injectI18n } from '@kbn/i18n/react';
 
-export function ApmStatusIcon({ status, availability = true }) {
+function ApmStatusIconUI({ status, availability = true, intl }) {
   const type = (() => {
     if (!availability) {
       return StatusIcon.TYPES.GRAY;
@@ -18,6 +19,15 @@ export function ApmStatusIcon({ status, availability = true }) {
   })();
 
   return (
-    <StatusIcon type={type} label={`Health: ${status}`} />
+    <StatusIcon
+      type={type}
+      label={intl.formatMessage({
+        id: 'xpack.monitoring.apm.healthStatusLabel',
+        defaultMessage: 'Health: {status}' }, {
+        status
+      })}
+    />
   );
 }
+
+export const ApmStatusIcon = injectI18n(ApmStatusIconUI);

x-pack/plugins/monitoring/public/components/chart/horizontal_legend.js

@@ -9,8 +9,9 @@ import { includes, isFunction } from 'lodash';
 import {
   EuiKeyboardAccessible,
 } from '@elastic/eui';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
-export class HorizontalLegend extends React.Component {
+class HorizontalLegendUI extends React.Component {
   constructor() {
     super();
     this.formatter = this.formatter.bind(this);
@@ -24,7 +25,10 @@ export class HorizontalLegend extends React.Component {
    */
   formatter(value) {
     if (value === null) {
-      return 'N/A';
+      return (<FormattedMessage
+        id="xpack.monitoring.chart.horizontalLegend.notAvailableLabel"
+        defaultMessage="N/A"
+      />);
     }
     if (isFunction(this.props.tickFormatter)) {
       return this.props.tickFormatter(value);
@@ -33,6 +37,7 @@ export class HorizontalLegend extends React.Component {
   }
 
   createSeries(row, rowIdx) {
+    const { intl } = this.props;
     const formatter = row.tickFormatter || this.formatter;
     const value = formatter(this.props.seriesValues[row.id]);
     const classes = ['col-md-4 col-xs-6 monRhythmChart__legendItem'];
@@ -59,7 +64,10 @@ export class HorizontalLegend extends React.Component {
             <span
               className="fa fa-circle monRhythmChart__legendIndicator"
               style={{ color: row.color }}
-              aria-label="toggle button"
+              aria-label={intl.formatMessage({
+                id: 'xpack.monitoring.chart.horizontalLegend.toggleButtonAriaLabel',
+                defaultMessage: 'toggle button'
+              })}
             />
             { ' ' + row.label }
           </span>
@@ -83,3 +91,5 @@ export class HorizontalLegend extends React.Component {
     );
   }
 }
+
+export const HorizontalLegend = injectI18n(HorizontalLegendUI);

x-pack/plugins/monitoring/public/components/chart/info_tooltip.js

@@ -5,6 +5,7 @@
  */
 
 import React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 export function InfoTooltip({ series, bucketSize }) {
   const tableRows = series.map((item, index) => {
@@ -28,7 +29,12 @@ export function InfoTooltip({ series, bucketSize }) {
     <table>
       <tbody>
         <tr>
-          <td className="monChart__tooltipLabel">Interval</td>
+          <td className="monChart__tooltipLabel">
+            <FormattedMessage
+              id="xpack.monitoring.chart.infoTooltip.intervalLabel"
+              defaultMessage="Interval"
+            />
+          </td>
           <td className="monChart__tooltipValue">{bucketSize}</td>
         </tr>
         { tableRows }