[i18n] Translations for Monitoring: Cluster and Alerts (elastic#24736)

* Translations for Cluster and Alerts

* Translations for cluster and alerts

* Translations for cluster and alerts

* Fix typos

* Update id

* Update Notification snapshot

* Translate lastEvent label

* Revert changes for untranslated label.

.i18nrc.json

@@ -25,8 +25,6 @@
   },
   "exclude": [
     "src/ui/ui_render/bootstrap/app_bootstrap.js",
-    "src/ui/ui_render/ui_render_mixin.js",
-    "x-pack/plugins/monitoring/public/components/cluster/overview/alerts_panel.js",
-    "x-pack/plugins/monitoring/public/directives/alerts/index.js"
+    "src/ui/ui_render/ui_render_mixin.js"
   ]
 }

src/core/public/notifications/toasts/__snapshots__/toasts_service.test.tsx.snap

@@ -3,23 +3,25 @@
 exports[`#start() renders the GlobalToastList into the targetDomElement param 1`] = `
 Array [
   Array [
-    <GlobalToastList
-      dismissToast={[Function]}
-      toasts$={
-        Observable {
-          "_isScalar": false,
-          "source": BehaviorSubject {
+    <I18nProvider>
+      <GlobalToastList
+        dismissToast={[Function]}
+        toasts$={
+          Observable {
             "_isScalar": false,
-            "_value": Array [],
-            "closed": false,
-            "hasError": false,
-            "isStopped": false,
-            "observers": Array [],
-            "thrownError": null,
-          },
+            "source": BehaviorSubject {
+              "_isScalar": false,
+              "_value": Array [],
+              "closed": false,
+              "hasError": false,
+              "isStopped": false,
+              "observers": Array [],
+              "thrownError": null,
+            },
+          }
         }
-      }
-    />,
+      />
+    </I18nProvider>,
     <div
       test="target-dom-element"
     />,

src/core/public/notifications/toasts/toasts_service.tsx

@@ -21,6 +21,7 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 
 import { Toast } from '@elastic/eui';
+import { I18nProvider } from '@kbn/i18n/react';
 import { GlobalToastList } from './global_toast_list';
 import { ToastsStartContract } from './toasts_start_contract';
 
@@ -35,10 +36,12 @@ export class ToastsService {
     const toasts = new ToastsStartContract();
 
     render(
-      <GlobalToastList
-        dismissToast={(toast: Toast) => toasts.remove(toast)}
-        toasts$={toasts.get$()}
-      />,
+      <I18nProvider>
+        <GlobalToastList
+          dismissToast={(toast: Toast) => toasts.remove(toast)}
+          toasts$={toasts.get$()}
+        />
+      </I18nProvider>,
       this.params.targetDomElement
     );
 

x-pack/plugins/monitoring/public/components/alerts/map_severity.js

@@ -29,24 +29,41 @@ import { capitalize } from 'lodash';
  * @param {Number} severity The number representing the severity. Higher is "worse".
  * @return {Object} An object containing details about the severity.
  */
+
+import { i18n } from '@kbn/i18n';
+
 export function mapSeverity(severity) {
   const floor = Math.floor(severity / 1000);
   let mapped;
 
   switch (floor) {
     case 0:
-      mapped = { value: 'low', color: 'warning', iconType: 'dot' };
+      mapped = {
+        value: i18n.translate('xpack.monitoring.alerts.lowSeverityName', { defaultMessage: 'low' }),
+        color: 'warning',
+        iconType: 'dot'
+      };
       break;
     case 1:
-      mapped = { value: 'medium', color: 'warning', iconType: 'dot' };
+      mapped = {
+        value: i18n.translate('xpack.monitoring.alerts.mediumSeverityName', { defaultMessage: 'medium' }),
+        color: 'warning',
+        iconType: 'dot'
+      };
       break;
     default: // severity >= 2000
-      mapped = { value: 'high', color: 'danger', iconType: 'dot' };
+      mapped = {
+        value: i18n.translate('xpack.monitoring.alerts.highSeverityName', { defaultMessage: 'high' }),
+        color: 'danger',
+        iconType: 'dot'
+      };
       break;
   }
 
   return {
-    title: `${capitalize(mapped.value)} severity alert`,
+    title: i18n.translate('xpack.monitoring.alerts.severityTitle',
+      { defaultMessage: '{severity} severity alert', values: { severity: capitalize(mapped.value) } }
+    ),
     ...mapped
   };
-}
+}

x-pack/plugins/monitoring/public/components/cluster/listing/alerts_indicator.js

@@ -8,12 +8,13 @@ import React from 'react';
 import { Tooltip } from 'plugins/monitoring/components/tooltip';
 import { mapSeverity } from 'plugins/monitoring/components/alerts/map_severity';
 import { EuiHealth } from '@elastic/eui';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
 const HIGH_SEVERITY = 2000;
 const MEDIUM_SEVERITY = 1000;
 const LOW_SEVERITY = 0;
 
-export function AlertsIndicator({ alerts }) {
+function AlertsIndicatorUi({ alerts, intl }) {
   if (alerts && alerts.count > 0) {
     const severity = (() => {
       if (alerts.high > 0) { return HIGH_SEVERITY; }
@@ -24,29 +25,49 @@ export function AlertsIndicator({ alerts }) {
     const tooltipText = (() => {
       switch (severity) {
         case HIGH_SEVERITY:
-          return 'There are some critical cluster issues that require your immediate attention!';
+          return intl.formatMessage({
+            id: 'xpack.monitoring.cluster.listing.alertsInticator.highSeverityTooltip',
+            defaultMessage: 'There are some critical cluster issues that require your immediate attention!' });
         case MEDIUM_SEVERITY:
-          return 'There are some issues that might have impact on your cluster.';
+          return intl.formatMessage({
+            id: 'xpack.monitoring.cluster.listing.alertsInticator.mediumSeverityTooltip',
+            defaultMessage: 'There are some issues that might have impact on your cluster.' });
         default:
           // might never show
-          return 'There are some low-severity cluster issues';
+          return intl.formatMessage({
+            id: 'xpack.monitoring.cluster.listing.alertsInticator.lowSeverityTooltip',
+            defaultMessage: 'There are some low-severity cluster issues' });
       }
     })();
 
     return (
       <Tooltip text={tooltipText} placement="bottom" trigger="hover">
         <EuiHealth color={severityIcon.color} data-test-subj="alertIcon">
-          Alerts
+          <FormattedMessage
+            id="xpack.monitoring.cluster.listing.alertsInticator.alertsTooltip"
+            defaultMessage="Alerts"
+          />
         </EuiHealth>
       </Tooltip>
     );
   }
 
   return (
-    <Tooltip text="Cluster status is clear!" placement="bottom" trigger="hover">
+    <Tooltip
+      text={intl.formatMessage({
+        id: 'xpack.monitoring.cluster.listing.alertsInticator.clearStatusTooltip',
+        defaultMessage: 'Cluster status is clear!' })}
+      placement="bottom"
+      trigger="hover"
+    >
       <EuiHealth color="success" data-test-subj="alertIcon">
-        Clear
+        <FormattedMessage
+          id="xpack.monitoring.cluster.listing.alertsInticator.clearTooltip"
+          defaultMessage="Clear"
+        />
       </EuiHealth>
     </Tooltip>
   );
 }
+
+export const AlertsIndicator = injectI18n(AlertsIndicatorUi);

x-pack/plugins/monitoring/public/components/cluster/overview/alerts_panel.js

@@ -10,6 +10,7 @@ import { mapSeverity } from 'plugins/monitoring/components/alerts/map_severity';
 import { formatTimestampToDuration } from '../../../../common/format_timestamp_to_duration';
 import { CALCULATE_DURATION_SINCE } from '../../../../common/constants';
 import { formatDateTimeLocal } from '../../../../common/formatting';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
 import {
   EuiFlexGroup,
@@ -22,7 +23,7 @@ import {
   EuiCallOut,
 } from '@elastic/eui';
 
-export function AlertsPanel({ alerts, changeUrl }) {
+function AlertsPanelUi({ alerts, changeUrl, intl }) {
   const goToAlerts = () => changeUrl('/alerts');
 
   if (!alerts || !alerts.length) {
@@ -35,8 +36,11 @@ export function AlertsPanel({ alerts, changeUrl }) {
     const severityIcon = mapSeverity(item.metadata.severity);
 
     if (item.resolved_timestamp) {
-      severityIcon.title =
-        `${severityIcon.title} (resolved ${formatTimestampToDuration(item.resolved_timestamp, CALCULATE_DURATION_SINCE)} ago)`;
+      severityIcon.title = intl.formatMessage({
+        id: 'xpack.monitoring.cluster.overview.alertsPanel.severityIconTitle',
+        defaultMessage: '{severityIconTitle} (resolved {time} ago)' },
+      { severityIconTitle: severityIcon.title, time: formatTimestampToDuration(item.resolved_timestamp, CALCULATE_DURATION_SINCE)
+      });
       severityIcon.color = "success";
       severityIcon.iconType = "check";
     }
@@ -60,11 +64,14 @@ export function AlertsPanel({ alerts, changeUrl }) {
         <EuiText size="xs">
           <p data-test-subj="alertMeta">
             <EuiTextColor color="subdued">
-              Last checked {
-                formatDateTimeLocal(item.update_timestamp)
-              } (triggered {
-                formatTimestampToDuration(item.timestamp, CALCULATE_DURATION_SINCE)
-              } ago)
+              <FormattedMessage
+                id="xpack.monitoring.cluster.overview.alertsPanel.lastCheckedTimeText"
+                defaultMessage="Last checked {updateDateTime} (triggered {duration} ago)"
+                values={{
+                  updateDateTime: formatDateTimeLocal(item.update_timestamp),
+                  duration: formatTimestampToDuration(item.timestamp, CALCULATE_DURATION_SINCE)
+                }}
+              />
             </EuiTextColor>
           </p>
         </EuiText>
@@ -80,13 +87,19 @@ export function AlertsPanel({ alerts, changeUrl }) {
         <EuiFlexItem grow={false}>
           <EuiTitle>
             <h2>
-              Top cluster alerts
+              <FormattedMessage
+                id="xpack.monitoring.cluster.overview.alertsPanel.topClusterTitle"
+                defaultMessage="Top cluster alerts"
+              />
             </h2>
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiButton size="s" onClick={goToAlerts} data-test-subj="viewAllAlerts">
-            View all alerts
+            <FormattedMessage
+              id="xpack.monitoring.cluster.overview.alertsPanel.viewAllButtonLabel"
+              defaultMessage="View all alerts"
+            />
           </EuiButton>
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -96,3 +109,5 @@ export function AlertsPanel({ alerts, changeUrl }) {
     </div>
   );
 }
+
+export const AlertsPanel = injectI18n(AlertsPanelUi);

x-pack/plugins/monitoring/public/components/cluster/overview/apm_panel.js

@@ -9,6 +9,7 @@ import moment from 'moment';
 import { get } from 'lodash';
 import { formatMetric } from 'plugins/monitoring/lib/format_number';
 import { ClusterItemContainer, BytesPercentageUsage } from './helpers';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
 import {
   EuiFlexGrid,
@@ -22,8 +23,9 @@ import {
   EuiHorizontalRule,
 } from '@elastic/eui';
 import { formatTimestampToDuration } from '../../../../common';
+import { CALCULATE_DURATION_SINCE } from '../../../../common/constants';
 
-export function ApmPanel(props) {
+function ApmPanelUi(props) {
   if (!get(props, 'apms.total', 0) > 0) {
     return null;
   }
@@ -32,30 +34,52 @@ export function ApmPanel(props) {
   const goToInstances = () => props.changeUrl('apm/instances');
 
   return (
-    <ClusterItemContainer {...props} url="apm" title="APM">
+    <ClusterItemContainer
+      {...props}
+      url="apm"
+      title={props.intl.formatMessage({ id: 'xpack.monitoring.cluster.overview.apmPanel.apmTitle', defaultMessage: 'APM' })}
+    >
       <EuiFlexGrid columns={2}>
         <EuiFlexItem>
           <EuiPanel paddingSize="m">
             <EuiTitle size="s">
               <h3>
                 <EuiLink
                   onClick={goToApm}
-                  aria-label="APM Overview"
+                  aria-label={props.intl.formatMessage({
+                    id: 'xpack.monitoring.cluster.overview.apmPanel.overviewLinkAriaLabel', defaultMessage: 'APM Overview' })}
                   data-test-subj="apmOverview"
                 >
-                  Overview
+                  <FormattedMessage
+                    id="xpack.monitoring.cluster.overview.apmPanel.overviewLinkLabel"
+                    defaultMessage="Overview"
+                  />
                 </EuiLink>
               </h3>
             </EuiTitle>
             <EuiHorizontalRule margin="m" />
             <EuiDescriptionList type="column">
-              <EuiDescriptionListTitle>Processed Events</EuiDescriptionListTitle>
+              <EuiDescriptionListTitle>
+                <FormattedMessage
+                  id="xpack.monitoring.cluster.overview.apmPanel.processedEventsLabel"
+                  defaultMessage="Processed Events"
+                />
+              </EuiDescriptionListTitle>
               <EuiDescriptionListDescription data-test-subj="apmsTotalEvents">
                 {formatMetric(props.totalEvents, '0.[0]a')}
               </EuiDescriptionListDescription>
-              <EuiDescriptionListTitle>Last Event</EuiDescriptionListTitle>
+              <EuiDescriptionListTitle>
+                <FormattedMessage
+                  id="xpack.monitoring.cluster.overview.apmPanel.lastEventLabel"
+                  defaultMessage="Last Event"
+                />
+              </EuiDescriptionListTitle>
               <EuiDescriptionListDescription data-test-subj="apmsBytesSent">
-                {formatTimestampToDuration(+moment(props.timeOfLastEvent), 'since') + ' ago'}
+                <FormattedMessage
+                  id="xpack.monitoring.cluster.overview.apmPanel.lastEventDescription"
+                  defaultMessage="{timeOfLastEvent} ago"
+                  values={{ timeOfLastEvent: formatTimestampToDuration(+moment(props.timeOfLastEvent), CALCULATE_DURATION_SINCE) }}
+                />
               </EuiDescriptionListDescription>
             </EuiDescriptionList>
           </EuiPanel>
@@ -66,16 +90,28 @@ export function ApmPanel(props) {
               <h3>
                 <EuiLink
                   onClick={goToInstances}
-                  aria-label={`Apm Instances: ${props.apms.total}`}
+                  aria-label={props.intl.formatMessage({
+                    id: 'xpack.monitoring.cluster.overview.apmPanel.instancesTotalLinkAriaLabel',
+                    defaultMessage: 'Apm Instances: {apmsTotal}' },
+                  { apmsTotal: props.apms.total })}
                   data-test-subj="apmListing"
                 >
-                  APM Servers: <span data-test-subj="apmsTotal">{props.apms.total}</span>
+                  <FormattedMessage
+                    id="xpack.monitoring.cluster.overview.apmPanel.serversTotalLinkLabel"
+                    defaultMessage="APM Servers: {apmsTotal}"
+                    values={{ apmsTotal: (<span data-test-subj="apmsTotal">{props.apms.total}</span>) }}
+                  />
                 </EuiLink>
               </h3>
             </EuiTitle>
             <EuiHorizontalRule margin="m" />
             <EuiDescriptionList type="column">
-              <EuiDescriptionListTitle>Memory Usage</EuiDescriptionListTitle>
+              <EuiDescriptionListTitle>
+                <FormattedMessage
+                  id="xpack.monitoring.cluster.overview.apmPanel.memoryUsageLabel"
+                  defaultMessage="Memory Usage"
+                />
+              </EuiDescriptionListTitle>
               <EuiDescriptionListDescription data-test-subj="apmMemoryUsage">
                 <BytesPercentageUsage usedBytes={props.memRss} maxBytes={props.memTotal} />
               </EuiDescriptionListDescription>
@@ -86,3 +122,5 @@ export function ApmPanel(props) {
     </ClusterItemContainer>
   );
 }
+
+export const ApmPanel = injectI18n(ApmPanelUi);