[i18n] Translations for Monitoring: Cluster and Alerts

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/cluster/overview/apm_panel.js

@@ -46,7 +46,7 @@ function ApmPanelUi(props) {
                 <EuiLink
                   onClick={goToApm}
                   aria-label={props.intl.formatMessage({
-                    id: 'xpack.monitoring.cluster.overview.apmPanel.apmOverviewLinkAriaLabel', defaultMessage: 'APM Overview' })}
+                    id: 'xpack.monitoring.cluster.overview.apmPanel.overviewLinkAriaLabel', defaultMessage: 'APM Overview' })}
                   data-test-subj="apmOverview"
                 >
                   <FormattedMessage
@@ -69,7 +69,7 @@ function ApmPanelUi(props) {
               </EuiDescriptionListDescription>
               <EuiDescriptionListTitle>
                 <FormattedMessage
-                  id="xpack.monitoring.cluster.overview.apmPanel.lastEventsLabel"
+                  id="xpack.monitoring.cluster.overview.apmPanel.lastEventLabel"
                   defaultMessage="Last Event"
                 />
               </EuiDescriptionListTitle>
@@ -86,13 +86,13 @@ function ApmPanelUi(props) {
                 <EuiLink
                   onClick={goToInstances}
                   aria-label={props.intl.formatMessage({
-                    id: 'xpack.monitoring.cluster.overview.apmPanel.apmInstancesLinkAriaLabel',
+                    id: 'xpack.monitoring.cluster.overview.apmPanel.instancesTotalLinkAriaLabel',
                     defaultMessage: 'Apm Instances: {apmsTotal}' },
                   { apmsTotal: props.apms.total })}
                   data-test-subj="apmListing"
                 >
                   <FormattedMessage
-                    id="xpack.monitoring.cluster.overview.apmPanel.apmServersLinkLabel"
+                    id="xpack.monitoring.cluster.overview.apmPanel.serversTotalLinkLabel"
                     defaultMessage="APM Servers: {apmsTotal}"
                     values={{ apmsTotal: (<span data-test-subj="apmsTotal">{props.apms.total}</span>) }}
                   />

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

@@ -60,7 +60,7 @@ function BeatsPanelUi(props) {
                 <EuiLink
                   onClick={goToBeats}
                   aria-label={props.intl.formatMessage({
-                    id: 'xpack.monitoring.cluster.overview.beatsPanel.beatsLinkAriaLabel', defaultMessage: 'Beats Overview' })}
+                    id: 'xpack.monitoring.cluster.overview.beatsPanel.overviewLinkAriaLabel', defaultMessage: 'Beats Overview' })}
                   data-test-subj="beatsOverview"
                 >
                   <FormattedMessage
@@ -100,13 +100,13 @@ function BeatsPanelUi(props) {
                 <EuiLink
                   onClick={goToInstances}
                   aria-label={props.intl.formatMessage({
-                    id: 'xpack.monitoring.cluster.overview.beatsPanel.beatsInstancesLinkAriaLabel',
+                    id: 'xpack.monitoring.cluster.overview.beatsPanel.instancesTotalLinkAriaLabel',
                     defaultMessage: 'Beats Instances: {beatsTotal}' },
                   { beatsTotal: props.beats.total })}
                   data-test-subj="beatsListing"
                 >
                   <FormattedMessage
-                    id="xpack.monitoring.cluster.overview.beatsPanel.bytesSentLinkLabel"
+                    id="xpack.monitoring.cluster.overview.beatsPanel.beatsTotalLinkLabel"
                     defaultMessage="Beats: {beatsTotal}"
                     values={{ beatsTotal: (<span data-test-subj="beatsTotal">{props.beats.total}</span>) }}
                   />

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

@@ -62,8 +62,8 @@ function ElasticsearchPanelUi(props) {
       return [
         <EuiDescriptionListTitle key="mlJobsListTitle">
           <FormattedMessage
-            id="xpack.monitoring.cluster.overview.esPanel.jobLabel"
-            defaultMessage="Job"
+            id="xpack.monitoring.cluster.overview.esPanel.jobsLabel"
+            defaultMessage="Jobs"
           />
         </EuiDescriptionListTitle>,
         <EuiDescriptionListDescription key="mlJobsCount" data-test-subj="esMlJobs">{ props.ml.jobs }</EuiDescriptionListDescription>
@@ -137,7 +137,7 @@ function ElasticsearchPanelUi(props) {
                   onClick={goToNodes}
                 >
                   <FormattedMessage
-                    id="xpack.monitoring.cluster.overview.esPanel.nodesLinkLabel"
+                    id="xpack.monitoring.cluster.overview.esPanel.nodesTotalLinkLabel"
                     defaultMessage="Nodes: {nodesTotal}"
                     values={{ nodesTotal: formatNumber(get(nodes, 'count.total'), 'int_commas') }}
                   />
@@ -161,7 +161,8 @@ function ElasticsearchPanelUi(props) {
               <EuiDescriptionListTitle>
                 <FormattedMessage
                   id="xpack.monitoring.cluster.overview.esPanel.jvmHeapLabel"
-                  defaultMessage="JVM Heap"
+                  defaultMessage="{javaVirtualMachine} Heap"
+                  values={{ javaVirtualMachine: 'JVM' }}
                 />
               </EuiDescriptionListTitle>
               <EuiDescriptionListDescription data-test-subj="esJvmHeap">

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

@@ -31,7 +31,7 @@ export function HealthStatusIndicator(props) {
   return (
     <EuiHealth color={statusColor} data-test-subj="statusIcon">
       <FormattedMessage
-        id="xpack.monitoring.cluster.overview.healthDescription"
+        id="xpack.monitoring.cluster.overview.healthStatusDescription"
         defaultMessage="Health is {status}"
         values={{ status: props.status }}
       />

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

@@ -78,7 +78,7 @@ function KibanaPanelUi(props) {
               </EuiDescriptionListTitle>
               <EuiDescriptionListDescription data-test-subj="kbnMaxResponseTime">
                 <FormattedMessage
-                  id="xpack.monitoring.cluster.overview.kibanaPanel.maxResponseTimeText"
+                  id="xpack.monitoring.cluster.overview.kibanaPanel.maxResponseTimeDescription"
                   defaultMessage="{maxTime} ms"
                   values={{ maxTime: props.response_time_max }}
                 />
@@ -95,7 +95,7 @@ function KibanaPanelUi(props) {
                   data-test-subj="kbnInstances"
                   aria-label={props.intl.formatMessage({
                     id: 'xpack.monitoring.cluster.overview.kibanaPanel.instancesCountLinkAriaLabel',
-                    defaultMessage: 'Instances: {instancesCount}' },
+                    defaultMessage: 'Kibana Instances: {instancesCount}' },
                   { instancesCount: props.count })}
                 >
                   <FormattedMessage

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

@@ -20,14 +20,14 @@ export function LicenseText({ license, showLicenseExpiration }) {
   return (
     <EuiLink href="#/license">
       <FormattedMessage
-        id="xpack.monitoring.cluster.overview.license.typeLinkText"
-        defaultMessage="{licenseType} license{willExpireOn}"
+        id="xpack.monitoring.cluster.overview.licenseText.toLicensePageLinkLabel"
+        defaultMessage="{licenseType} license {willExpireOn}"
         values={{
           licenseType: capitalize(license.type),
           willExpireOn: license.expiry_date_in_millis === undefined ? '' : (
             <FormattedMessage
-              id="xpack.monitoring.cluster.overview.license.willExpireOnDateText"
-              defaultMessage=" will expire on {expiryDate}"
+              id="xpack.monitoring.cluster.overview.licenseText.expireDateText"
+              defaultMessage="will expire on {expiryDate}"
               values={{ expiryDate: formatDateLocal(license.expiry_date_in_millis) }}
             />
           )

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

@@ -115,7 +115,8 @@ function LogstashPanelUi(props) {
               <EuiDescriptionListTitle>
                 <FormattedMessage
                   id="xpack.monitoring.cluster.overview.logstashPanel.jvmHeapLabel"
-                  defaultMessage="JVM Heap"
+                  defaultMessage="{javaVirtualMachine} Heap"
+                  values={{ javaVirtualMachine: 'JVM' }}
                 />
               </EuiDescriptionListTitle>
               <EuiDescriptionListDescription data-test-subj="lsJvmHeap">
@@ -148,7 +149,7 @@ function LogstashPanelUi(props) {
                     <span className="kuiIcon fa-flask betaIcon" />
                   </Tooltip>
                   <FormattedMessage
-                    id="xpack.monitoring.cluster.overview.logstashPanel.pipelinesLinkLabel"
+                    id="xpack.monitoring.cluster.overview.logstashPanel.pipelinesCountLinkLabel"
                     defaultMessage="Pipelines: {pipelineCount}"
                     values={{ pipelineCount: (<span data-test-subj="number_of_logstash_pipelines">{ props.pipeline_count }</span>) }}
                   />

x-pack/plugins/monitoring/public/directives/alerts/index.js

@@ -17,24 +17,65 @@ import { FormattedAlert } from 'plugins/monitoring/components/alerts/formatted_a
 import { mapSeverity } from 'plugins/monitoring/components/alerts/map_severity';
 import { formatTimestampToDuration } from '../../../common/format_timestamp_to_duration';
 import { formatDateTimeLocal } from '../../../common/formatting';
+import { i18n } from '@kbn/i18n';
+import { injectI18n, I18nProvider, FormattedMessage } from '@kbn/i18n/react';
 
 const linkToCategories = {
-  'elasticsearch/nodes': 'Elasticsearch Nodes',
-  'elasticsearch/indices': 'Elasticsearch Indices',
-  'kibana/instances': 'Kibana Instances',
-  'logstash/instances': 'Logstash Nodes',
+  'elasticsearch/nodes': i18n.translate('xpack.monitoring.alerts.esNodesCategoryLabel', {
+    defaultMessage: 'Elasticsearch Nodes',
+  }),
+  'elasticsearch/indices': i18n.translate('xpack.monitoring.alerts.esIndicesCategoryLabel', {
+    defaultMessage: 'Elasticsearch Indices',
+  }),
+  'kibana/instances': i18n.translate('xpack.monitoring.alerts.kibanaInstancesCategoryLabel', {
+    defaultMessage: 'Kibana Instances',
+  }),
+  'logstash/instances': i18n.translate('xpack.monitoring.alerts.logstashNodesCategoryLabel', {
+    defaultMessage: 'Logstash Nodes',
+  }),
 };
 const filterFields = [ 'message', 'severity_group', 'prefix', 'suffix', 'metadata.link', 'since', 'timestamp', 'update_timestamp' ];
 const columns = [
-  { title: 'Status', sortKey: 'metadata.severity', sortOrder: SORT_DESCENDING },
-  { title: 'Resolved', sortKey: 'resolved_timestamp' },
-  { title: 'Message', sortKey: 'message' },
-  { title: 'Category', sortKey: 'metadata.link' },
-  { title: 'Last Checked', sortKey: 'update_timestamp' },
-  { title: 'Triggered', sortKey: 'timestamp' },
+  {
+    title: i18n.translate('xpack.monitoring.alerts.statusColumnTitle', {
+      defaultMessage: 'Status',
+    }),
+    sortKey: 'metadata.severity',
+    sortOrder: SORT_DESCENDING
+  },
+  {
+    title: i18n.translate('xpack.monitoring.alerts.resolvedColumnTitle', {
+      defaultMessage: 'Resolved',
+    }),
+    sortKey: 'resolved_timestamp'
+  },
+  {
+    title: i18n.translate('xpack.monitoring.alerts.messageColumnTitle', {
+      defaultMessage: 'Message',
+    }),
+    sortKey: 'message'
+  },
+  {
+    title: i18n.translate('xpack.monitoring.alerts.categoryColumnTitle', {
+      defaultMessage: 'Category',
+    }),
+    sortKey: 'metadata.link'
+  },
+  {
+    title: i18n.translate('xpack.monitoring.alerts.lastCheckedColumnTitle', {
+      defaultMessage: 'Last Checked',
+    }),
+    sortKey: 'update_timestamp'
+  },
+  {
+    title: i18n.translate('xpack.monitoring.alerts.triggeredColumnTitle', {
+      defaultMessage: 'Triggered',
+    }),
+    sortKey: 'timestamp'
+  },
 ];
 const alertRowFactory = (scope, kbnUrl) => {
-  return props => {
+  return injectI18n(props => {
     const changeUrl = target => {
       scope.$evalAsync(() => {
         kbnUrl.changePath(target);
@@ -43,13 +84,24 @@ const alertRowFactory = (scope, kbnUrl) => {
     const severityIcon = mapSeverity(props.metadata.severity);
     const resolution = {
       icon: null,
-      text: 'Not Resolved'
+      text: props.intl.formatMessage({ id: 'xpack.monitoring.alerts.notResolvedDescription',
+        defaultMessage: 'Not Resolved',
+      })
     };
 
     if (props.resolved_timestamp) {
-      resolution.text = `${formatTimestampToDuration(props.resolved_timestamp, CALCULATE_DURATION_SINCE)} ago`;
+      resolution.text = props.intl.formatMessage({ id: 'xpack.monitoring.alerts.resolvedAgoDescription',
+        defaultMessage: '{duraction} ago',
+      }, { duraction: formatTimestampToDuration(props.resolved_timestamp, CALCULATE_DURATION_SINCE) }
+      );
     } else {
-      resolution.icon = <EuiIcon type="alert" size="m" aria-label="Not Resolved" />;
+      resolution.icon = (
+        <EuiIcon
+          type="alert"
+          size="m"
+          aria-label={props.intl.formatMessage({ id: 'xpack.monitoring.alerts.notResolvedAriaLabel', defaultMessage: 'Not Resolved', })}
+        />
+      );
     }
 
     return (
@@ -74,36 +126,44 @@ const alertRowFactory = (scope, kbnUrl) => {
           />
         </KuiTableRowCell>
         <KuiTableRowCell tabIndex="0">
-          { linkToCategories[props.metadata.link] ? linkToCategories[props.metadata.link] : 'General' }
+          { linkToCategories[props.metadata.link] ? linkToCategories[props.metadata.link] :
+            props.intl.formatMessage({ id: 'xpack.monitoring.alerts.generalCategoryDescription', defaultMessage: 'General', }) }
         </KuiTableRowCell>
         <KuiTableRowCell tabIndex="0">
           { formatDateTimeLocal(props.update_timestamp) }
         </KuiTableRowCell>
         <KuiTableRowCell tabIndex="0">
-          { formatTimestampToDuration(props.timestamp, CALCULATE_DURATION_SINCE) } ago
+          <FormattedMessage
+            id="xpack.monitoring.alerts.trigeredAgoDescription"
+            defaultMessage="{duraction} ago"
+            values={{ duraction: formatTimestampToDuration(props.timestamp, CALCULATE_DURATION_SINCE) }}
+          />
         </KuiTableRowCell>
       </KuiTableRow>
     );
-  };
+  });
 };
 
 const uiModule = uiModules.get('monitoring/directives', []);
-uiModule.directive('monitoringClusterAlertsListing', kbnUrl => {
+uiModule.directive('monitoringClusterAlertsListing', (kbnUrl, i18n) => {
   return {
     restrict: 'E',
     scope: { alerts: '=' },
     link(scope, $el) {
+      const filterAlertsPlaceholder = i18n('xpack.monitoring.alerts.filterAlertsPlaceholder', { defaultMessage: 'Filter Alerts…' });
 
       scope.$watch('alerts', (alerts = []) => {
         const alertsTable = (
-          <MonitoringTable
-            className="alertsTable"
-            rows={alerts}
-            placeholder="Filter Alerts..."
-            filterFields={filterFields}
-            columns={columns}
-            rowComponent={alertRowFactory(scope, kbnUrl)}
-          />
+          <I18nProvider>
+            <MonitoringTable
+              className="alertsTable"
+              rows={alerts}
+              placeholder={filterAlertsPlaceholder}
+              filterFields={filterFields}
+              columns={columns}
+              rowComponent={alertRowFactory(scope, kbnUrl)}
+            />
+          </I18nProvider>
         );
         render(alertsTable, $el[0]);
       });