[i18n] Translations for Monitoring: Beats

x-pack/plugins/monitoring/public/components/beats/beat/beat.js

@@ -8,8 +8,9 @@ import React from 'react';
 import { MonitoringTimeseriesContainer } from '../../chart';
 import { formatMetric } from '../../../lib/format_number';
 import { EuiFlexItem, EuiFlexGroup, EuiPage, EuiPageBody, EuiFlexGrid, EuiSpacer } from '@elastic/eui';
+import { injectI18n } from '@kbn/i18n/react';
 
-export function Beat({ summary, metrics, ...props }) {
+function BeatUi({ summary, metrics, intl, ...props }) {
 
   const metricsToShow = [
     metrics.beat_event_rates,
@@ -40,22 +41,74 @@ export function Beat({ summary, metrics, ...props }) {
   );
 
   const summarytStatsTop = [
-    { label: 'Name', value: summary.name, dataTestSubj: 'name' },
-    { label: 'Host', value: summary.transportAddress, dataTestSubj: 'host' },
-    { label: 'Version', value: summary.version, dataTestSubj: 'version' },
-    { label: 'Type', value: summary.type, dataTestSubj: 'type' },
-    { label: 'Output', value: summary.output, dataTestSubj: 'output' },
-    { label: 'Config reloads', value: formatMetric(summary.configReloads, 'int_commas'), dataTestSubj: 'configReloads' },
-    { label: 'Uptime', value: formatMetric(summary.uptime, 'time_since'), dataTestSubj: 'uptime' },
+    {
+      label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.nameLabel', defaultMessage: 'Name' }),
+      value: summary.name,
+      dataTestSubj: 'name'
+    },
+    {
+      label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.hostLabel', defaultMessage: 'Host' }),
+      value: summary.transportAddress,
+      dataTestSubj: 'host'
+    },
+    {
+      label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.versionLabel', defaultMessage: 'Version' }),
+      value: summary.version,
+      dataTestSubj: 'version'
+    },
+    {
+      label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.typeLabel', defaultMessage: 'Type' }),
+      value: summary.type,
+      dataTestSubj: 'type'
+    },
+    {
+      label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.outputLabel', defaultMessage: 'Output' }),
+      value: summary.output,
+      dataTestSubj: 'output'
+    },
+    {
+      label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.configReloadsLabel', defaultMessage: 'Config reloads' }),
+      value: formatMetric(summary.configReloads, 'int_commas'),
+      dataTestSubj: 'configReloads'
+    },
+    {
+      label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.uptimeLabel', defaultMessage: 'Uptime' }),
+      value: formatMetric(summary.uptime, 'time_since'),
+      dataTestSubj: 'uptime'
+    },
   ];
 
   const summarytStatsBot = [
-    { label: 'Events total', value: formatMetric(summary.eventsTotal, 'int_commas'), dataTestSubj: 'eventsTotal' },
-    { label: 'Events emitted', value: formatMetric(summary.eventsEmitted, 'int_commas'), dataTestSubj: 'eventsEmitted' },
-    { label: 'Events dropped', value: formatMetric(summary.eventsDropped, 'int_commas'), dataTestSubj: 'eventsDropped' },
-    { label: 'Bytes sent', value: formatMetric(summary.bytesWritten, 'byte'), dataTestSubj: 'bytesWritten' },
-    { label: 'Handles limit (soft)', value: formatMetric(summary.handlesSoftLimit, 'byte'), dataTestSubj: 'handlesLimitSoft' },
-    { label: 'Handles limit (hard)', value: formatMetric(summary.handlesHardLimit, 'byte'), dataTestSubj: 'handlesLimitHard' },
+    {
+      label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.eventsTotalLabel', defaultMessage: 'Events total' }),
+      value: formatMetric(summary.eventsTotal, 'int_commas'),
+      dataTestSubj: 'eventsTotal'
+    },
+    {
+      label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.eventsEmittedLabel', defaultMessage: 'Events emitted' }),
+      value: formatMetric(summary.eventsEmitted, 'int_commas'),
+      dataTestSubj: 'eventsEmitted'
+    },
+    {
+      label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.eventsDroppedLabel', defaultMessage: 'Events dropped' }),
+      value: formatMetric(summary.eventsDropped, 'int_commas'),
+      dataTestSubj: 'eventsDropped'
+    },
+    {
+      label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.bytesSentLabel', defaultMessage: 'Bytes sent' }),
+      value: formatMetric(summary.bytesWritten, 'byte'),
+      dataTestSubj: 'bytesWritten'
+    },
+    {
+      label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.handlesLimitSoftLabel', defaultMessage: 'Handles limit (soft)' }),
+      value: formatMetric(summary.handlesSoftLimit, 'byte'),
+      dataTestSubj: 'handlesLimitSoft'
+    },
+    {
+      label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.handlesLimitHardLabel', defaultMessage: 'Handles limit (hard)' }),
+      value: formatMetric(summary.handlesHardLimit, 'byte'),
+      dataTestSubj: 'handlesLimitHard'
+    },
   ];
 
   return (
@@ -102,3 +155,5 @@ export function Beat({ summary, metrics, ...props }) {
     </div>
   );
 }
+
+export const Beat = injectI18n(BeatUi);

x-pack/plugins/monitoring/public/components/beats/overview/__snapshots__/overview.test.js.snap

@@ -35,13 +35,17 @@ exports[`Overview that overview page renders normally 1`] = `
             textTransform="none"
           >
             <h3>
-              Active Beats in Last Day
+              <FormattedMessage
+                defaultMessage="Active Beats in Last Day"
+                id="xpack.monitoring.beats.overview.activeBeatsInLastDayTitle"
+                values={Object {}}
+              />
             </h3>
           </EuiTitle>
           <EuiSpacer
             size="s"
           />
-          <LatestActive
+          <InjectIntl(LatestActiveUi)
             latestActive={
               Array [
                 Object {
@@ -83,7 +87,11 @@ exports[`Overview that overview page renders normally 1`] = `
             textTransform="none"
           >
             <h3>
-              Top 5 Beat Types in Last Day
+              <FormattedMessage
+                defaultMessage="Top 5 Beat Types in Last Day"
+                id="xpack.monitoring.beats.overview.top5BeatTypesInLastDayTitle"
+                values={Object {}}
+              />
             </h3>
           </EuiTitle>
           <EuiSpacer
@@ -123,7 +131,11 @@ exports[`Overview that overview page renders normally 1`] = `
             textTransform="none"
           >
             <h3>
-              Top 5 Versions in Last Day
+              <FormattedMessage
+                defaultMessage="Top 5 Versions in Last Day"
+                id="xpack.monitoring.beats.overview.top5VersionsInLastDayTitle"
+                values={Object {}}
+              />
             </h3>
           </EuiTitle>
           <EuiSpacer
@@ -266,8 +278,7 @@ exports[`Overview that overview page shows a message if there is no beats data 1
       data-test-subj="noRecentActivityMessage"
       iconType="gear"
       size="m"
-      title="Hi there! This area is where your latest Beats activity would show
-up, but you don't seem to have any activity within the last day."
+      title="Hi there! This area is where your latest Beats activity would show up, but you don't seem to have any activity within the last day."
     />
     <EuiSpacer
       size="s"

x-pack/plugins/monitoring/public/components/beats/overview/latest_active.js

@@ -9,14 +9,18 @@ import PropTypes from 'prop-types';
 import {
   EuiBasicTable
 } from '@elastic/eui';
+import { injectI18n } from '@kbn/i18n/react';
 
-export function LatestActive({ latestActive }) {
+function LatestActiveUi({ latestActive, intl }) {
   const rangeMap = {
-    'last1m': 'Last 1 minute',
-    'last5m': 'Last 5 minutes',
-    'last20m': 'Last 20 minutes',
-    'last1h': 'Last 1 hour',
-    'last1d': 'Last 1 day',
+    'last1m':
+      intl.formatMessage({ id: 'xpack.monitoring.beats.overview.latestActive.last1MinuteLabel', defaultMessage: 'Last 1 minute' }),
+    'last5m':
+      intl.formatMessage({ id: 'xpack.monitoring.beats.overview.latestActive.last5MinutesLabel', defaultMessage: 'Last 5 minutes' }),
+    'last20m':
+      intl.formatMessage({ id: 'xpack.monitoring.beats.overview.latestActive.last20MinutesLabel', defaultMessage: 'Last 20 minutes' }),
+    'last1h': intl.formatMessage({ id: 'xpack.monitoring.beats.overview.latestActive.last1HourLabel', defaultMessage: 'Last 1 hour' }),
+    'last1d': intl.formatMessage({ id: 'xpack.monitoring.beats.overview.latestActive.last1DayLabel', defaultMessage: 'Last 1 day' }),
   };
 
   const activity = latestActive.map(({ range, count }) => ({
@@ -42,9 +46,11 @@ export function LatestActive({ latestActive }) {
   );
 }
 
-LatestActive.propTypes = {
+LatestActiveUi.propTypes = {
   latestActive: PropTypes.arrayOf(PropTypes.shape({
     range: PropTypes.string.isRequired,
     count: PropTypes.number.isRequired,
   })).isRequired
 };
+
+export const LatestActive = injectI18n(LatestActiveUi);

x-pack/plugins/monitoring/public/components/beats/overview/latest_active.test.js

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallowWithIntl } from '../../../../../../test_utils/enzyme_helpers';
 
 import { LatestActive } from './latest_active';
 
@@ -19,8 +19,8 @@ describe('Latest Active', () => {
       { range: 'last1d', count: 10 },
     ];
 
-    const component = shallow(
-      <LatestActive
+    const component = shallowWithIntl(
+      <LatestActive.WrappedComponent
         latestActive={latestActive}
       />
     );

x-pack/plugins/monitoring/public/components/beats/overview/overview.js

@@ -10,6 +10,7 @@ import { LatestVersions } from './latest_versions';
 import { LatestTypes } from './latest_types';
 import { Stats } from '../';
 import { MonitoringTimeseriesContainer } from '../../chart';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 import {
   EuiCallOut,
   EuiTitle,
@@ -21,27 +22,48 @@ import {
   EuiPanel
 } from '@elastic/eui';
 
-function renderLatestActive(latestActive, latestTypes, latestVersions) {
+function renderLatestActive(latestActive, latestTypes, latestVersions, intl) {
   if (latestTypes && latestTypes.length > 0) {
     return (
       <EuiFlexGroup wrap>
         <EuiFlexItem>
           <EuiPanel>
-            <EuiTitle size="s"><h3>Active Beats in Last Day</h3></EuiTitle>
+            <EuiTitle size="s">
+              <h3>
+                <FormattedMessage
+                  id="xpack.monitoring.beats.overview.activeBeatsInLastDayTitle"
+                  defaultMessage="Active Beats in Last Day"
+                />
+              </h3>
+            </EuiTitle>
             <EuiSpacer size="s"/>
             <LatestActive latestActive={latestActive} />
           </EuiPanel>
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiPanel>
-            <EuiTitle size="s"><h3>Top 5 Beat Types in Last Day</h3></EuiTitle>
+            <EuiTitle size="s">
+              <h3>
+                <FormattedMessage
+                  id="xpack.monitoring.beats.overview.top5BeatTypesInLastDayTitle"
+                  defaultMessage="Top 5 Beat Types in Last Day"
+                />
+              </h3>
+            </EuiTitle>
             <EuiSpacer size="s"/>
             <LatestTypes latestTypes={latestTypes} />
           </EuiPanel>
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiPanel>
-            <EuiTitle size="s"><h3>Top 5 Versions in Last Day</h3></EuiTitle>
+            <EuiTitle size="s">
+              <h3>
+                <FormattedMessage
+                  id="xpack.monitoring.beats.overview.top5VersionsInLastDayTitle"
+                  defaultMessage="Top 5 Versions in Last Day"
+                />
+              </h3>
+            </EuiTitle>
             <EuiSpacer size="s"/>
             <LatestVersions latestVersions={latestVersions} />
           </EuiPanel>
@@ -50,8 +72,11 @@ function renderLatestActive(latestActive, latestTypes, latestVersions) {
     );
   }
 
-  const calloutMsg = `Hi there! This area is where your latest Beats activity would show
-up, but you don't seem to have any activity within the last day.`;
+  const calloutMsg = intl.formatMessage({
+    id: 'xpack.monitoring.beats.overview.noActivityDescription',
+    // eslint-disable-next-line max-len
+    defaultMessage: `Hi there! This area is where your latest Beats activity would show up, but you don't seem to have any activity within the last day.`
+  });
 
   return (
     <EuiCallOut
@@ -62,12 +87,13 @@ up, but you don't seem to have any activity within the last day.`;
   );
 }
 
-export function BeatsOverview({
+function BeatsOverviewUi({
   latestActive,
   latestTypes,
   latestVersions,
   stats,
   metrics,
+  intl,
   ...props
 }) {
   const seriesToShow = [
@@ -91,7 +117,7 @@ export function BeatsOverview({
   return (
     <EuiPage style={{ backgroundColor: 'white' }}>
       <EuiPageBody>
-        {renderLatestActive(latestActive, latestTypes, latestVersions)}
+        {renderLatestActive(latestActive, latestTypes, latestVersions, intl)}
         <EuiSpacer size="s"/>
         <Stats stats={stats} />
         <EuiSpacer size="s"/>
@@ -102,3 +128,5 @@ export function BeatsOverview({
     </EuiPage>
   );
 }
+
+export const BeatsOverview = injectI18n(BeatsOverviewUi);

x-pack/plugins/monitoring/public/components/beats/overview/overview.test.js

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallowWithIntl } from '../../../../../../test_utils/enzyme_helpers';
 
 jest.mock('../stats', () => ({
   Stats: () => 'Stats',
@@ -41,8 +41,8 @@ describe('Overview', () => {
       beat_output_errors: 1
     };
 
-    const component = shallow(
-      <BeatsOverview
+    const component = shallowWithIntl(
+      <BeatsOverview.WrappedComponent
         latestActive={latestActive}
         latestTypes={latestTypes}
         latestVersions={latestVersions}
@@ -62,8 +62,8 @@ describe('Overview', () => {
       beat_output_errors: 1
     };
 
-    const component = shallow(
-      <BeatsOverview
+    const component = shallowWithIntl(
+      <BeatsOverview.WrappedComponent
         stats={[]}
         metrics={metrics}
       />