[Monitoring] Fix issues with the localization effort (#29372)

* Fix issues with the localization effort, mainly due to two ongoing refactors in the same code * Apply suggestions from code review Co-Authored-By: chrisronline <chrisronline@gmail.com> * PR feedback
2019-01-30 09:04:18 -05:00 · 2019-01-30 09:04:18 -05:00 · eec327b1fe
parent 4356a2dae3
commit eec327b1fe
8 changed files with 118 additions and 28 deletions
--- a/x-pack/plugins/monitoring/public/components/alerts/alerts.js
+++ b/x-pack/plugins/monitoring/public/components/alerts/alerts.js
@ -14,6 +14,7 @@ import { FormattedAlert } from 'plugins/monitoring/components/alerts/formatted_a
 import { EuiMonitoringTable } from 'plugins/monitoring/components/table';
 import { EuiHealth, EuiIcon, EuiToolTip } from '@elastic/eui';
 import { injectI18n } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';

 const linkToCategories = {
  'elasticsearch/nodes': 'Elasticsearch Nodes',
@ -23,7 +24,9 @@ const linkToCategories = {
 };
 const getColumns = (kbnUrl, scope) => ([
  {
-    name: 'Status',
+    name: i18n.translate('xpack.monitoring.alerts.statusColumnTitle', {
+      defaultMessage: 'Status',
+    }),
    field: 'status',
    sortable: true,
    render: severity => {
@ -39,19 +42,30 @@ const getColumns = (kbnUrl, scope) => ([
    }
  },
  {
-    name: 'Resolved',
+    name: i18n.translate('xpack.monitoring.alerts.resolvedColumnTitle', {
+      defaultMessage: 'Resolved',
+    }),
    field: 'resolved_timestamp',
    sortable: true,
    render: (resolvedTimestamp) => {
+      const notResolvedLabel = i18n.translate('xpack.monitoring.alerts.notResolvedDescription', {
+        defaultMessage: 'Not Resolved',
+      });
+
      const resolution = {
        icon: null,
-        text: 'Not Resolved'
+        text: notResolvedLabel,
      };

      if (resolvedTimestamp) {
-        resolution.text = `${formatTimestampToDuration(resolvedTimestamp, CALCULATE_DURATION_SINCE)} ago`;
+        resolution.text = i18n.translate('xpack.monitoring.alerts.resolvedAgoDescription', {
+          defaultMessage: '{duration} ago',
+          values: {
+            duration: formatTimestampToDuration(resolvedTimestamp, CALCULATE_DURATION_SINCE)
+          }
+        });
      } else {
-        resolution.icon = <EuiIcon type="alert" size="m" aria-label="Not Resolved" />;
+        resolution.icon = <EuiIcon type="alert" size="m" aria-label={notResolvedLabel} />;
      }

      return (
@ -62,7 +76,9 @@ const getColumns = (kbnUrl, scope) => ([
    },
  },
  {
-    name: 'Message',
+    name: i18n.translate('xpack.monitoring.alerts.messageColumnTitle', {
+      defaultMessage: 'Message',
+    }),
    field: 'message',
    sortable: true,
    render: (message, alert) => (
@ -80,22 +96,37 @@ const getColumns = (kbnUrl, scope) => ([
    )
  },
  {
-    name: 'Category',
+    name: i18n.translate('xpack.monitoring.alerts.categoryColumnTitle', {
+      defaultMessage: 'Category',
+    }),
    field: 'category',
    sortable: true,
-    render: link => linkToCategories[link] ? linkToCategories[link] : 'General'
+    render: link => linkToCategories[link]
+      ? linkToCategories[link]
+      : i18n.translate('xpack.monitoring.alerts.categoryColumn.generalLabel', {
+        defaultMessage: 'General',
+      })
  },
  {
-    name: 'Last Checked',
+    name: i18n.translate('xpack.monitoring.alerts.lastCheckedColumnTitle', {
+      defaultMessage: 'Last Checked',
+    }),
    field: 'update_timestamp',
    sortable: true,
    render: timestamp => formatDateTimeLocal(timestamp)
  },
  {
-    name: 'Triggered',
+    name: i18n.translate('xpack.monitoring.alerts.triggeredColumnTitle', {
+      defaultMessage: 'Triggered',
+    }),
    field: 'timestamp',
    sortable: true,
-    render: timestamp => formatTimestampToDuration(timestamp, CALCULATE_DURATION_SINCE) + ' ago'
+    render: timestamp => i18n.translate('xpack.monitoring.alerts.triggeredColumnValue', {
+      defaultMessage: '{timestamp} ago',
+      values: {
+        timestamp: formatTimestampToDuration(timestamp, CALCULATE_DURATION_SINCE)
+      }
+    })
  },
 ]);

--- a/x-pack/plugins/monitoring/public/components/apm/instances/instances.js
+++ b/x-pack/plugins/monitoring/public/components/apm/instances/instances.js
@ -62,7 +62,12 @@ const columns = [
      defaultMessage: 'Last Event'
    }),
    field: 'time_of_last_event',
-    render: value => formatTimestampToDuration(+moment(value), 'since') + ' ago'
+    render: value => i18n.translate('xpack.monitoring.apm.instances.lastEventValue', {
+      defaultMessage: '{timeOfLastEvent} ago',
+      values: {
+        timeOfLastEvent: formatTimestampToDuration(+moment(value), 'since')
+      }
+    })
  },
  {
    name: i18n.translate('xpack.monitoring.apm.instances.allocatedMemoryTitle', {
@ -115,7 +120,10 @@ export function ApmServerInstancesUI({ apms, intl }) {
                {
                  type: 'field_value_selection',
                  field: 'version',
-                  name: 'Version',
+                  name: intl.formatMessage({
+                    id: 'xpack.monitoring.apm.instances.versionFilter',
+                    defaultMessage: 'Version'
+                  }),
                  options: versions,
                  multiSelect: 'or',
                }
--- a/x-pack/plugins/monitoring/public/components/beats/listing/listing.js
+++ b/x-pack/plugins/monitoring/public/components/beats/listing/listing.js
@ -108,14 +108,18 @@ class ListingUI extends PureComponent {
                  {
                    type: 'field_value_selection',
                    field: 'type',
-                    name: 'Type',
+                    name: i18n.translate('xpack.monitoring.beats.instances.typeFilter', {
+                      defaultMessage: 'Type'
+                    }),
                    options: types,
                    multiSelect: 'or',
                  },
                  {
                    type: 'field_value_selection',
                    field: 'version',
-                    name: 'Version',
+                    name: i18n.translate('xpack.monitoring.beats.instances.versionFilter', {
+                      defaultMessage: 'Version'
+                    }),
                    options: versions,
                    multiSelect: 'or',
                  }
--- a/x-pack/plugins/monitoring/public/components/beats/stats.js
+++ b/x-pack/plugins/monitoring/public/components/beats/stats.js
@ -7,6 +7,7 @@
 import React from 'react';
 import { formatMetric } from 'plugins/monitoring/lib/format_number';
 import { SummaryStatus } from '../summary_status';
+import { i18n } from '@kbn/i18n';

 export function Stats({ stats }) {
  const {
@ -20,7 +21,9 @@ export function Stats({ stats }) {

  const metrics = [
    {
-      label: 'Total Beats',
+      label: i18n.translate('xpack.monitoring.beats.overview.totalBeatsLabel', {
+        defaultMessage: 'Total Beats'
+      }),
      value: formatMetric(total, 'int_commas'),
      'data-test-subj': 'totalBeats'
    },
@ -34,13 +37,17 @@ export function Stats({ stats }) {
  })));

  metrics.push({
-    label: 'Total Events',
+    label: i18n.translate('xpack.monitoring.beats.overview.totalEventsLabel', {
+      defaultMessage: 'Total Events'
+    }),
    value: formatMetric(totalEvents, '0.[0]a'),
    'data-test-subj': 'totalEvents'
  });

  metrics.push({
-    label: 'Bytes Sent',
+    label: i18n.translate('xpack.monitoring.beats.overview.bytesSentLabel', {
+      defaultMessage: 'Bytes Sent'
+    }),
    value: formatMetric(bytesSent, 'byte'),
    'data-test-subj': 'bytesSent'
  });
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/cells.js
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/cells.js
@ -8,6 +8,7 @@ import React from 'react';
 import { get } from 'lodash';
 import { formatMetric } from '../../../lib/format_number';
 import { EuiStat, EuiText, EuiTitle, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';

 function OfflineCell() {
  return (
@ -52,10 +53,20 @@ function MetricCell({ isOnline, metric = {}, isPercent, ...props }) {
            </EuiFlexItem>
            <EuiFlexItem grow={false}>
              <EuiText size="xs">
-                { metricVal(maxVal, format, isPercent) + ' max' }
+                {i18n.translate('xpack.monitoring.elasticsearch.nodes.cells.maxText', {
+                  defaultMessage: '{metric} max',
+                  values: {
+                    metric: metricVal(maxVal, format, isPercent)
+                  }
+                })}
              </EuiText>
              <EuiText size="xs">
-                { metricVal(minVal, format, isPercent) + ' min' }
+                {i18n.translate('xpack.monitoring.elasticsearch.nodes.cells.minText', {
+                  defaultMessage: '{metric} min',
+                  values: {
+                    metric: metricVal(minVal, format, isPercent)
+                  }
+                })}
              </EuiText>
            </EuiFlexItem>
          </EuiFlexGroup>
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js
@ -67,7 +67,11 @@ const getColumns = showCgroupMetricsElasticsearch => {
    field: 'isOnline',
    sortable: true,
    render: value => {
-      const status = value ? 'Online' : 'Offline';
+      const status = value ? i18n.translate('xpack.monitoring.elasticsearch.nodes.statusColumn.onlineLabel', {
+        defaultMessage: 'Online',
+      }) : i18n.translate('xpack.monitoring.elasticsearch.nodes.statusColumn.offlineLabel', {
+        defaultMessage: 'Offline',
+      });
      return (
        <div className="monTableCell__status">
          <NodeStatusIcon
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_listing/pipeline_listing.js
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_listing/pipeline_listing.js
@ -13,6 +13,7 @@ import { ClusterStatus } from '../cluster_status';
 import { Sparkline } from 'plugins/monitoring/components/sparkline';
 import { EuiMonitoringTable } from '../../table';
 import { injectI18n } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';

 class PipelineListingUI extends Component {
  tooltipXValueFormatter(xValue) {
@ -29,7 +30,9 @@ class PipelineListingUI extends Component {

    return [
      {
-        name: 'ID',
+        name: i18n.translate('xpack.monitoring.logstash.pipelines.idTitle', {
+          defaultMessage: 'ID'
+        }),
        field: 'id',
        sortable: true,
        render: (id) => (
@ -46,7 +49,9 @@ class PipelineListingUI extends Component {
        )
      },
      {
-        name: 'Events Emitted Rate',
+        name: i18n.translate('xpack.monitoring.logstash.pipelines.eventsEmittedRateTitle', {
+          defaultMessage: 'Events Emitted Rate'
+        }),
        field: 'latestThroughput',
        sortable: true,
        render: (value, pipeline) => {
@ -78,7 +83,9 @@ class PipelineListingUI extends Component {
        }
      },
      {
-        name: 'Number of Nodes',
+        name: i18n.translate('xpack.monitoring.logstash.pipelines.numberOfNodesTitle', {
+          defaultMessage: 'Number of Nodes'
+        }),
        field: 'latestNodesCount',
        sortable: true,
        render: (value, pipeline) => {
--- a/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js
+++ b/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js
@ -9,6 +9,8 @@ import PropTypes from 'prop-types';
 import { isEmpty, capitalize } from 'lodash';
 import { EuiFlexGroup, EuiFlexItem, EuiStat, EuiHorizontalRule } from '@elastic/eui';
 import { StatusIcon } from '../status_icon/index.js';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';

 const wrapChild = ({ label, value, ...props }, index) => (
  <EuiFlexItem
@ -27,9 +29,23 @@ const wrapChild = ({ label, value, ...props }, index) => (

 const DefaultIconComponent = ({ status }) => (
  <Fragment>
-    Status: {(
-      <StatusIcon type={status.toUpperCase()} label={`Status: ${status}`} />
-    )}
+    <FormattedMessage
+      id="xpack.monitoring.summaryStatus.statusIconTitle"
+      defaultMessage="Status: {statusIcon}"
+      values={{
+        statusIcon: (
+          <StatusIcon
+            type={status.toUpperCase()}
+            label={i18n.translate('xpack.monitoring.summaryStatus.statusIconLabel', {
+              defaultMessage: 'Status: {status}',
+              values: {
+                status
+              }
+            })}
+          />
+        )
+      }}
+    />
  </Fragment>
 );

@ -53,7 +69,9 @@ const StatusIndicator = ({ status, isOnline, IconComponent }) => {
        )}
        titleSize="s"
        textAlign="left"
-        description="Status:"
+        description={i18n.translate('xpack.monitoring.summaryStatus.statusDescription', {
+          defaultMessage: 'Status:',
+        })}
      />
    </EuiFlexItem>
  );