From 77abc021e30fd6e7045d64eaeb4a72aff5b7c07e Mon Sep 17 00:00:00 2001
From: Alexandr Ogarkov <nox.911@gmail.com>
Date: Thu, 1 Nov 2018 13:39:59 +0300
Subject: [PATCH 1/4] Translate monitoring -> summary_status, table, main.html
 in directives

---
 .../summary_status/summary_status.js          |  24 ++-
 .../public/components/table/footer.js         |  11 +-
 .../public/components/table/table.js          |  24 ++-
 .../public/components/table/toolbar.js        |   9 +-
 .../public/directives/alerts/index.js         |  19 ++-
 .../public/directives/beats/listing/index.js  |  37 ++---
 .../directives/cluster/listing/index.js       |  29 ++--
 .../elasticsearch/ml_job_listing/index.js     |  31 ++--
 .../public/directives/kibana/listing/index.js |  29 ++--
 .../directives/logstash/listing/index.js      |  29 ++--
 .../logstash/pipeline_listing/index.js        |  29 ++--
 .../public/directives/main/index.html         | 137 +++++++++++++++---
 .../public/views/apm/instances/index.js       |  23 +--
 .../views/elasticsearch/indices/index.js      |  15 +-
 .../public/views/elasticsearch/nodes/index.js |  13 +-
 .../elasticsearch/overview/controller.js      |  19 ++-
 16 files changed, 324 insertions(+), 154 deletions(-)

diff --git a/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js b/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js
index 0466d1cff9749..742e978b70406 100644
--- 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,7 @@ import PropTypes from 'prop-types';
 import { isEmpty, capitalize } from 'lodash';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { StatusIcon } from '../status_icon/index.js';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
 const wrapChild = ({ label, value, dataTestSubj }, index) => (
   <EuiFlexItem
@@ -27,13 +28,26 @@ const wrapChild = ({ label, value, dataTestSubj }, index) => (
   </EuiFlexItem>
 );
 
-const DefaultIconComponent = ({ status }) => (
+const DefaultIconComponent = injectI18n(({ status, intl }) => (
   <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={intl.formatMessage({
+              id: 'xpack.monitoring.summaryStatus.statusIconLabel',
+              defaultMessage: 'Status: {status}' }, {
+              status
+            })}
+          />
+        )
+      }}
+    />
   </Fragment>
-);
+));
 
 const StatusIndicator = ({ status, isOnline, IconComponent }) => {
   if (isEmpty(status)) {
diff --git a/x-pack/plugins/monitoring/public/components/table/footer.js b/x-pack/plugins/monitoring/public/components/table/footer.js
index 19584c1bc6b12..8a54a3782c2b3 100644
--- a/x-pack/plugins/monitoring/public/components/table/footer.js
+++ b/x-pack/plugins/monitoring/public/components/table/footer.js
@@ -10,13 +10,22 @@ import {
   KuiToolBarFooterSection,
   KuiToolBarText
 } from '@kbn/ui-framework/components';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 export function MonitoringTableFooter({ pageIndexFirstRow, pageIndexLastRow, rowsFiltered, paginationControls }) {
   return (
     <KuiToolBarFooter>
       <KuiToolBarFooterSection>
         <KuiToolBarText>
-          { pageIndexFirstRow } &ndash; { pageIndexLastRow } of { rowsFiltered }
+          <FormattedMessage
+            id="xpack.monitoring.table.footer.pageRowsDescription"
+            defaultMessage="{pageIndexFirstRow} &ndash; {pageIndexLastRow} of {rowsFiltered}"
+            values={{
+              pageIndexFirstRow,
+              pageIndexLastRow,
+              rowsFiltered
+            }}
+          />
         </KuiToolBarText>
 
         { paginationControls }
diff --git a/x-pack/plugins/monitoring/public/components/table/table.js b/x-pack/plugins/monitoring/public/components/table/table.js
index 5f90ce3a7f044..ca33fa30401d1 100644
--- a/x-pack/plugins/monitoring/public/components/table/table.js
+++ b/x-pack/plugins/monitoring/public/components/table/table.js
@@ -22,6 +22,7 @@ import { MonitoringTableToolBar } from './toolbar';
 import { MonitoringTableNoData } from './no_data';
 import { MonitoringTableFooter } from './footer';
 import classNames from 'classnames';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
 /*
  * State and data management for Monitoring Tables
@@ -46,7 +47,7 @@ import classNames from 'classnames';
  *  }
  * ];
  */
-export class MonitoringTable extends React.Component {
+class MonitoringTableUI extends React.Component {
   constructor(props) {
     super(props);
 
@@ -121,7 +122,13 @@ export class MonitoringTable extends React.Component {
         this.resetPaging();
         break;
       default:
-        throw new Error(`Unknown table action type ${action}! This shouldn't happen!`);
+        throw new Error(
+          this.props.intl.formatMessage({
+            id: 'xpack.monitoring.table.unknownTableActionTypeErrorMessage',
+            defaultMessage: 'Unknown table action type {action}! This shouldn\'t happen!' }, {
+            action
+          })
+        );
     }
   }
 
@@ -403,7 +410,14 @@ export class MonitoringTable extends React.Component {
 
     if (this.state.rows === null) {
       // rows are null, show loading message
-      table = <MonitoringTableNoData message="Loading..." />;
+      table = (<MonitoringTableNoData
+        message={(
+          <FormattedMessage
+            id="xpack.monitoring.table.loadingTitle"
+            defaultMessage="Loading…"
+          />
+        )}
+      />);
     } else if (numVisibleRows > 0) {
       // data has some rows, show them
       const RowComponent = this.props.rowComponent;
@@ -450,10 +464,12 @@ const defaultGetNoDataMessage = filterText => {
   return DEFAULT_NO_DATA_MESSAGE;
 };
 
-MonitoringTable.defaultProps = {
+MonitoringTableUI.defaultProps = {
   rows: [],
   filterFields: [],
   getNoDataMessage: defaultGetNoDataMessage,
   alwaysShowPageControls: false,
   rowsPerPage: 20
 };
+
+export const MonitoringTable = injectI18n(MonitoringTableUI);
diff --git a/x-pack/plugins/monitoring/public/components/table/toolbar.js b/x-pack/plugins/monitoring/public/components/table/toolbar.js
index 82b5403599db9..5f75a1898f1f0 100644
--- a/x-pack/plugins/monitoring/public/components/table/toolbar.js
+++ b/x-pack/plugins/monitoring/public/components/table/toolbar.js
@@ -12,6 +12,7 @@ import {
   KuiToolBarSection,
   KuiToolBarText
 } from '@kbn/ui-framework/components';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 export function MonitoringTableToolBar(props) {
   const searchBox = props.showSearchBox
@@ -40,7 +41,13 @@ export function MonitoringTableToolBar(props) {
   const totalRows = Boolean(props.showTotalRows)
     ? (
       <p tabIndex="0" className="monitoringTableToolbarTotalRows">
-        {props.totalRows} in total
+        <FormattedMessage
+          id="xpack.monitoring.table.toolbar.totalRowsDescription"
+          defaultMessage="{totalRows} in total"
+          values={{
+            totalRows: props.totalRows
+          }}
+        />
       </p>
     )
     : null;
diff --git a/x-pack/plugins/monitoring/public/directives/alerts/index.js b/x-pack/plugins/monitoring/public/directives/alerts/index.js
index c099fc7d6d029..22efffd61dcfc 100644
--- a/x-pack/plugins/monitoring/public/directives/alerts/index.js
+++ b/x-pack/plugins/monitoring/public/directives/alerts/index.js
@@ -17,6 +17,7 @@ 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 { I18nProvider } from '@kbn/i18n/react';
 
 const linkToCategories = {
   'elasticsearch/nodes': 'Elasticsearch Nodes',
@@ -96,14 +97,16 @@ uiModule.directive('monitoringClusterAlertsListing', kbnUrl => {
 
       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="Filter Alerts..."
+              filterFields={filterFields}
+              columns={columns}
+              rowComponent={alertRowFactory(scope, kbnUrl)}
+            />
+          </I18nProvider>
         );
         render(alertsTable, $el[0]);
       });
diff --git a/x-pack/plugins/monitoring/public/directives/beats/listing/index.js b/x-pack/plugins/monitoring/public/directives/beats/listing/index.js
index 795c1066401ce..f3a49d417e5df 100644
--- a/x-pack/plugins/monitoring/public/directives/beats/listing/index.js
+++ b/x-pack/plugins/monitoring/public/directives/beats/listing/index.js
@@ -23,6 +23,7 @@ import { MonitoringTable } from 'plugins/monitoring/components/table';
 import {
   EuiLink,
 } from '@elastic/eui';
+import { I18nProvider } from '@kbn/i18n/react';
 
 const filterFields = [ 'name', 'type', 'version', 'output' ];
 const columns = [
@@ -108,24 +109,26 @@ uiModule.directive('monitoringBeatsListing', (kbnUrl) => {
 
       scope.$watch('data', (data = {}) => {
         render((
-          <div>
-            <Stats stats={data.stats} />
-            <div className="page-row">
-              <MonitoringTable
-                className="beatsTable"
-                rows={data.listing}
-                pageIndex={scope.pageIndex}
-                filterText={scope.filterText}
-                sortKey={scope.sortKey}
-                sortOrder={scope.sortOrder}
-                onNewState={scope.onNewState}
-                placeholder="Filter Beats..."
-                filterFields={filterFields}
-                columns={columns}
-                rowComponent={beatRowFactory(scope, kbnUrl)}
-              />
+          <I18nProvider>
+            <div>
+              <Stats stats={data.stats} />
+              <div className="page-row">
+                <MonitoringTable
+                  className="beatsTable"
+                  rows={data.listing}
+                  pageIndex={scope.pageIndex}
+                  filterText={scope.filterText}
+                  sortKey={scope.sortKey}
+                  sortOrder={scope.sortOrder}
+                  onNewState={scope.onNewState}
+                  placeholder="Filter Beats..."
+                  filterFields={filterFields}
+                  columns={columns}
+                  rowComponent={beatRowFactory(scope, kbnUrl)}
+                />
+              </div>
             </div>
-          </div>
+          </I18nProvider>
         ), $el[0]);
       });
 
diff --git a/x-pack/plugins/monitoring/public/directives/cluster/listing/index.js b/x-pack/plugins/monitoring/public/directives/cluster/listing/index.js
index 30f88eb553f20..15e6921ae6a82 100644
--- a/x-pack/plugins/monitoring/public/directives/cluster/listing/index.js
+++ b/x-pack/plugins/monitoring/public/directives/cluster/listing/index.js
@@ -24,6 +24,7 @@ import { MonitoringTable } from 'plugins/monitoring/components/table';
 import { Tooltip } from 'plugins/monitoring/components/tooltip';
 import { AlertsIndicator } from 'plugins/monitoring/components/cluster/listing/alerts_indicator';
 import { SORT_ASCENDING } from '../../../../common/constants';
+import { I18nProvider } from '@kbn/i18n/react';
 
 const filterFields = [ 'cluster_name', 'status', 'license.type' ];
 const columns = [
@@ -285,19 +286,21 @@ uiModule.directive('monitoringClusterListing', ($injector) => {
 
       scope.$watch('clusters', (clusters = []) => {
         const clusterTable = (
-          <MonitoringTable
-            className="clusterTable"
-            rows={clusters}
-            pageIndex={scope.pageIndex}
-            filterText={scope.filterText}
-            sortKey={scope.sortKey}
-            sortOrder={scope.sortOrder}
-            onNewState={scope.onNewState}
-            placeholder="Filter Clusters..."
-            filterFields={filterFields}
-            columns={columns}
-            rowComponent={clusterRowFactory(scope, globalState, kbnUrl, showLicenseExpiration)}
-          />
+          <I18nProvider>
+            <MonitoringTable
+              className="clusterTable"
+              rows={clusters}
+              pageIndex={scope.pageIndex}
+              filterText={scope.filterText}
+              sortKey={scope.sortKey}
+              sortOrder={scope.sortOrder}
+              onNewState={scope.onNewState}
+              placeholder="Filter Clusters..."
+              filterFields={filterFields}
+              columns={columns}
+              rowComponent={clusterRowFactory(scope, globalState, kbnUrl, showLicenseExpiration)}
+            />
+          </I18nProvider>
         );
         render(clusterTable, $el[0]);
       });
diff --git a/x-pack/plugins/monitoring/public/directives/elasticsearch/ml_job_listing/index.js b/x-pack/plugins/monitoring/public/directives/elasticsearch/ml_job_listing/index.js
index 0bfd05102cbbc..1de1861b52bfc 100644
--- a/x-pack/plugins/monitoring/public/directives/elasticsearch/ml_job_listing/index.js
+++ b/x-pack/plugins/monitoring/public/directives/elasticsearch/ml_job_listing/index.js
@@ -20,6 +20,7 @@ import { LARGE_ABBREVIATED, LARGE_BYTES } from '../../../../common/formatting';
 import {
   EuiLink,
 } from '@elastic/eui';
+import { I18nProvider } from '@kbn/i18n/react';
 
 const filterFields = [ 'job_id', 'state', 'node.name' ];
 const columns = [
@@ -92,20 +93,22 @@ Try changing the filter or time range.`
 
       scope.$watch('jobs', (jobs = []) => {
         const mlTable = (
-          <MonitoringTable
-            className="mlJobsTable"
-            rows={jobs}
-            pageIndex={scope.pageIndex}
-            filterText={scope.filterText}
-            sortKey={scope.sortKey}
-            sortOrder={scope.sortOrder}
-            onNewState={scope.onNewState}
-            placeholder="Filter Jobs..."
-            filterFields={filterFields}
-            columns={columns}
-            rowComponent={jobRowFactory(scope, kbnUrl)}
-            getNoDataMessage={getNoDataMessage}
-          />
+          <I18nProvider>
+            <MonitoringTable
+              className="mlJobsTable"
+              rows={jobs}
+              pageIndex={scope.pageIndex}
+              filterText={scope.filterText}
+              sortKey={scope.sortKey}
+              sortOrder={scope.sortOrder}
+              onNewState={scope.onNewState}
+              placeholder="Filter Jobs..."
+              filterFields={filterFields}
+              columns={columns}
+              rowComponent={jobRowFactory(scope, kbnUrl)}
+              getNoDataMessage={getNoDataMessage}
+            />
+          </I18nProvider>
         );
         render(mlTable, $el[0]);
       });
diff --git a/x-pack/plugins/monitoring/public/directives/kibana/listing/index.js b/x-pack/plugins/monitoring/public/directives/kibana/listing/index.js
index bb38b04a8ca88..62e1f9acc33dd 100644
--- a/x-pack/plugins/monitoring/public/directives/kibana/listing/index.js
+++ b/x-pack/plugins/monitoring/public/directives/kibana/listing/index.js
@@ -22,6 +22,7 @@ import {
 import {
   EuiLink,
 } from '@elastic/eui';
+import { I18nProvider } from '@kbn/i18n/react';
 
 const filterFields = [ 'kibana.name', 'kibana.host', 'kibana.status', 'kibana.transport_address' ];
 const columns = [
@@ -103,19 +104,21 @@ uiModule.directive('monitoringKibanaListing', kbnUrl => {
 
       scope.$watch('instances', (instances = []) => {
         const kibanasTable = (
-          <MonitoringTable
-            className="kibanaInstancesTable"
-            rows={instances}
-            pageIndex={scope.pageIndex}
-            filterText={scope.filterText}
-            sortKey={scope.sortKey}
-            sortOrder={scope.sortOrder}
-            onNewState={scope.onNewState}
-            placeholder="Filter Instances..."
-            filterFields={filterFields}
-            columns={columns}
-            rowComponent={instanceRowFactory(scope, kbnUrl)}
-          />
+          <I18nProvider>
+            <MonitoringTable
+              className="kibanaInstancesTable"
+              rows={instances}
+              pageIndex={scope.pageIndex}
+              filterText={scope.filterText}
+              sortKey={scope.sortKey}
+              sortOrder={scope.sortOrder}
+              onNewState={scope.onNewState}
+              placeholder="Filter Instances..."
+              filterFields={filterFields}
+              columns={columns}
+              rowComponent={instanceRowFactory(scope, kbnUrl)}
+            />
+          </I18nProvider>
         );
         render(kibanasTable, $el[0]);
       });
diff --git a/x-pack/plugins/monitoring/public/directives/logstash/listing/index.js b/x-pack/plugins/monitoring/public/directives/logstash/listing/index.js
index b00adec468c7b..10a6e6069f739 100644
--- a/x-pack/plugins/monitoring/public/directives/logstash/listing/index.js
+++ b/x-pack/plugins/monitoring/public/directives/logstash/listing/index.js
@@ -21,6 +21,7 @@ import {
   formatNumber,
   formatPercentageUsage
 } from '../../../lib/format_number';
+import { I18nProvider } from '@kbn/i18n/react';
 
 const filterFields = [ 'logstash.name', 'logstash.host', 'logstash.http_address' ];
 const columns = [
@@ -102,19 +103,21 @@ uiModule.directive('monitoringLogstashNodeListing', kbnUrl => {
 
       scope.$watch('nodes', (nodes = []) => {
         const nodesTable = (
-          <MonitoringTable
-            className="logstashNodesTable"
-            rows={nodes}
-            pageIndex={scope.pageIndex}
-            filterText={scope.filterText}
-            sortKey={scope.sortKey}
-            sortOrder={scope.sortOrder}
-            onNewState={scope.onNewState}
-            placeholder="Filter Nodes..."
-            filterFields={filterFields}
-            columns={columns}
-            rowComponent={nodeRowFactory(scope, kbnUrl)}
-          />
+          <I18nProvider>
+            <MonitoringTable
+              className="logstashNodesTable"
+              rows={nodes}
+              pageIndex={scope.pageIndex}
+              filterText={scope.filterText}
+              sortKey={scope.sortKey}
+              sortOrder={scope.sortOrder}
+              onNewState={scope.onNewState}
+              placeholder="Filter Nodes..."
+              filterFields={filterFields}
+              columns={columns}
+              rowComponent={nodeRowFactory(scope, kbnUrl)}
+            />
+          </I18nProvider>
         );
         render(nodesTable, $el[0]);
       });
diff --git a/x-pack/plugins/monitoring/public/directives/logstash/pipeline_listing/index.js b/x-pack/plugins/monitoring/public/directives/logstash/pipeline_listing/index.js
index 0df57bff80de1..17a51e9c88852 100644
--- a/x-pack/plugins/monitoring/public/directives/logstash/pipeline_listing/index.js
+++ b/x-pack/plugins/monitoring/public/directives/logstash/pipeline_listing/index.js
@@ -24,6 +24,7 @@ import { Sparkline } from 'plugins/monitoring/components/sparkline';
 import { SORT_ASCENDING } from '../../../../common/constants';
 import { formatMetric } from '../../../lib/format_number';
 import { timefilter } from 'ui/timefilter';
+import { I18nProvider } from '@kbn/i18n/react';
 
 const filterFields = [ 'id' ];
 const columns = [
@@ -151,19 +152,21 @@ uiModule.directive('monitoringLogstashPipelineListing', ($injector) => {
         }
 
         const pipelinesTable = (
-          <MonitoringTable
-            className="logstashPipelinesTable"
-            rows={pipelines}
-            pageIndex={scope.pageIndex}
-            filterText={scope.filterText}
-            sortKey={scope.sortKey}
-            sortOrder={scope.sortOrder}
-            onNewState={scope.onNewState}
-            placeholder="Filter Pipelines..."
-            filterFields={filterFields}
-            columns={columns}
-            rowComponent={pipelineRowFactory(onPipelineClick, onBrush, tooltipXValueFormatter, tooltipYValueFormatter)}
-          />
+          <I18nProvider>
+            <MonitoringTable
+              className="logstashPipelinesTable"
+              rows={pipelines}
+              pageIndex={scope.pageIndex}
+              filterText={scope.filterText}
+              sortKey={scope.sortKey}
+              sortOrder={scope.sortOrder}
+              onNewState={scope.onNewState}
+              placeholder="Filter Pipelines..."
+              filterFields={filterFields}
+              columns={columns}
+              rowComponent={pipelineRowFactory(onPipelineClick, onBrush, tooltipXValueFormatter, tooltipYValueFormatter)}
+            />
+          </I18nProvider>
         );
         render(pipelinesTable, $el[0]);
       });
diff --git a/x-pack/plugins/monitoring/public/directives/main/index.html b/x-pack/plugins/monitoring/public/directives/main/index.html
index 9a1333a3dd57e..c3b1f04e1f4f9 100644
--- a/x-pack/plugins/monitoring/public/directives/main/index.html
+++ b/x-pack/plugins/monitoring/public/directives/main/index.html
@@ -31,11 +31,46 @@
       <!-- Tabs -->
       <div data-transclude-slot="bottomRow">
         <div ng-if="monitoringMain.inElasticsearch" class="kuiLocalTabs" role="navigation">
-          <a ng-if="!monitoringMain.instance" kbn-href="#/elasticsearch" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('overview')}">Overview</a>
-          <a ng-if="!monitoringMain.instance" kbn-href="#/elasticsearch/nodes" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('nodes')}">Nodes</a>
-          <a ng-if="!monitoringMain.instance" kbn-href="#/elasticsearch/indices" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('indices')}">Indices</a>
-          <a ng-if="!monitoringMain.instance && monitoringMain.isMlSupported()" kbn-href="#/elasticsearch/ml_jobs" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('ml')}">Jobs</a>
-          <a ng-if="!monitoringMain.instance" kbn-href="#/elasticsearch/ccr" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('ccr')}">CCR</a>
+          <a
+            ng-if="!monitoringMain.instance"
+            kbn-href="#/elasticsearch"
+            class="kuiLocalTab"
+            ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('overview')}"
+            i18n-id="xpack.monitoring.main.esNavigation.overviewLinkText"
+            i18n-default-message="Overview"
+          ></a>
+          <a
+            ng-if="!monitoringMain.instance"
+            kbn-href="#/elasticsearch/nodes"
+            class="kuiLocalTab"
+            ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('nodes')}"
+            i18n-id="xpack.monitoring.main.esNavigation.nodesLinkText"
+            i18n-default-message="Nodes"
+          ></a>
+          <a
+            ng-if="!monitoringMain.instance"
+            kbn-href="#/elasticsearch/indices"
+            class="kuiLocalTab"
+            ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('indices')}"
+            i18n-id="xpack.monitoring.main.esNavigation.indicesLinkText"
+            i18n-default-message="Indices"
+          ></a>
+          <a
+            ng-if="!monitoringMain.instance && monitoringMain.isMlSupported()"
+            kbn-href="#/elasticsearch/ml_jobs"
+            class="kuiLocalTab"
+            ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('ml')}"
+            i18n-id="xpack.monitoring.main.esNavigation.jobsLinkText"
+            i18n-default-message="Jobs"
+          ></a>
+          <a
+            ng-if="!monitoringMain.instance"
+            kbn-href="#/elasticsearch/ccr"
+            class="kuiLocalTab"
+            ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('ccr')}"
+            i18n-id="xpack.monitoring.main.esNavigation.ccrLinkText"
+            i18n-default-message="CCR"
+          ></a>
           <a
             ng-if="monitoringMain.instance && (monitoringMain.name === 'nodes' || monitoringMain.name === 'indices')"
             kbn-href="#/elasticsearch/{{ monitoringMain.name }}/{{ monitoringMain.resolver }}"
@@ -43,15 +78,19 @@
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.page === 'overview'}"
           >
             <span ng-if="monitoringMain.tabIconClass" class="fa {{ monitoringMain.tabIconClass }}" title="{{ monitoringMain.tabIconLabel }}"></span>
-            Overview
+            <span
+              i18n-id="xpack.monitoring.main.esNavigation.instance.overviewLinkText"
+              i18n-default-message="Overview"
+            ></span>
           </a>
           <a
             ng-if="monitoringMain.instance && (monitoringMain.name === 'nodes' || monitoringMain.name === 'indices')"
             kbn-href="#/elasticsearch/{{ monitoringMain.name }}/{{ monitoringMain.resolver }}/advanced"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.page === 'advanced'}"
+            i18n-id="xpack.monitoring.main.esNavigation.instance.advancedLinkText"
+            i18n-default-message="Advanced"
           >
-            Advanced
           </a>
             <!-- ML Instance (for use later) -->
           <a
@@ -60,14 +99,42 @@
         </div>
 
         <div ng-if="monitoringMain.inKibana" class="kuiLocalTabs" role="navigation">
-          <a ng-if="!monitoringMain.instance" kbn-href="#/kibana" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('overview')}">Overview</a>
-          <a ng-if="!monitoringMain.instance" kbn-href="#/kibana/instances" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('kibanas')}">Instances</a>
+          <a
+            ng-if="!monitoringMain.instance"
+            kbn-href="#/kibana"
+            class="kuiLocalTab"
+            ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('overview')}"
+            i18n-id="xpack.monitoring.main.kibanaNavigation.overviewLinkText"
+            i18n-default-message="Overview"
+          ></a>
+          <a
+            ng-if="!monitoringMain.instance"
+            kbn-href="#/kibana/instances"
+            class="kuiLocalTab"
+            ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('kibanas')}"
+            i18n-id="xpack.monitoring.main.kibanaNavigation.instancesLinkText"
+            i18n-default-message="Instances"
+          ></a>
           <a ng-if="monitoringMain.instance" class="kuiLocalTab">{{ monitoringMain.instance }}</a>
         </div>
 
         <div ng-if="monitoringMain.inApm" class="kuiLocalTabs" role="navigation">
-          <a ng-if="!monitoringMain.instance" kbn-href="#/apm" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('overview')}">Overview</a>
-          <a ng-if="!monitoringMain.instance" kbn-href="#/apm/instances" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('apms')}">Instances</a>
+          <a
+            ng-if="!monitoringMain.instance"
+            kbn-href="#/apm"
+            class="kuiLocalTab"
+            ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('overview')}"
+            i18n-id="xpack.monitoring.main.apmNavigation.overviewLinkText"
+            i18n-default-message="Overview"
+          ></a>
+          <a
+            ng-if="!monitoringMain.instance"
+            kbn-href="#/apm/instances"
+            class="kuiLocalTab"
+            ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('apms')}"
+            i18n-id="xpack.monitoring.main.apmNavigation.instancesLinkText"
+            i18n-default-message="Instances"
+          ></a>
           <a ng-if="monitoringMain.instance" class="kuiLocalTab">{{ monitoringMain.instance }}</a>
         </div>
 
@@ -78,24 +145,27 @@
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected':
             monitoringMain.isActiveTab('overview')}"
+            i18n-id="xpack.monitoring.main.beatsNavigation.overviewLinkText"
+            i18n-default-message="Overview"
           >
-            Overview
           </a>
           <a
             ng-if="!monitoringMain.instance"
             kbn-href="#/beats/beats"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('beats')}"
+            i18n-id="xpack.monitoring.main.beatsNavigation.instancesLinkText"
+            i18n-default-message="Instances"
           >
-            Instances
           </a>
           <a
             ng-if="monitoringMain.instance"
             kbn-href="#/beats/beat/{{ monitoringMain.resolver }}"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.page === 'overview'}"
+            i18n-id="xpack.monitoring.main.beatsNavigation.instance.overviewLinkText"
+            i18n-default-message="Overview"
           >
-            Overview
           </a>
         </div>
 
@@ -105,16 +175,18 @@
             kbn-href="#/logstash"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('overview')}"
+            i18n-id="xpack.monitoring.main.logstashNavigation.overviewLinkText"
+            i18n-default-message="Overview"
           >
-            Overview
           </a>
           <a
             ng-if="!monitoringMain.instance && !monitoringMain.pipelineId"
             kbn-href="#/logstash/nodes"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('nodes')}"
+            i18n-id="xpack.monitoring.main.logstashNavigation.nodesLinkText"
+            i18n-default-message="Nodes"
           >
-            Nodes
           </a>
           <a
             ng-if="!monitoringMain.instance && !monitoringMain.pipelineId"
@@ -123,15 +195,19 @@
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('pipelines')}"
           >
             <span class="kuiIcon fa-flask betaIcon" tooltip="Beta Feature" />
-            Pipelines
+            <span
+              i18n-id="xpack.monitoring.main.logstashNavigation.pipelinesLinkText"
+              i18n-default-message="Pipelines"
+            ></span>
           </a>
           <a
             ng-if="monitoringMain.instance"
             kbn-href="#/logstash/node/{{ monitoringMain.resolver }}"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.page === 'overview'}"
+            i18n-id="xpack.monitoring.main.logstashNavigation.instance.overviewLinkText"
+            i18n-default-message="Overview"
           >
-            Overview
           </a>
           <a
             ng-if="monitoringMain.instance"
@@ -140,15 +216,19 @@
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.page === 'pipelines'}"
           >
             <span class="kuiIcon fa-flask betaIcon" tooltip="Beta Feature" />
-            Pipelines
+            <span
+              i18n-id="xpack.monitoring.main.logstashNavigation.instance.pipelinesLinkText"
+              i18n-default-message="Pipelines"
+            ></span>
           </a>
           <a
             ng-if="monitoringMain.instance"
             kbn-href="#/logstash/node/{{ monitoringMain.resolver }}/advanced"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.page === 'advanced'}"
+            i18n-id="xpack.monitoring.main.logstashNavigation.instance.AdvancedLinkText"
+            i18n-default-message="Advanced"
           >
-            Advanced
           </a>
           <div
             ng-if="monitoringMain.pipelineVersions"
@@ -163,8 +243,10 @@ <h1 class="kuiTitle kuiFlexItem">{{ monitoringMain.pipelineId }}</h1>
               <option
                 ng-repeat="version in monitoringMain.pipelineVersions"
                 ng-value="version.hash"
+                i18n-id="xpack.monitoring.main.logstashNavigation.pipelineVersionDescription"
+                i18n-default-message="Version active {relativeLastSeen} and first seen {relativeFirstSeen}"
+                i18n-values="{relativeLastSeen: version.relativeLastSeen, relativeFirstSeen: version.relativeFirstSeen}"
               >
-                Version active {{ version.relativeLastSeen }} and first seen {{ version.relativeFirstSeen }}
               </option>
             </select>
           </div>
@@ -175,11 +257,20 @@ <h1 class="kuiTitle kuiFlexItem">{{ monitoringMain.pipelineId }}</h1>
         </div>
 
         <div ng-if="monitoringMain.inAlerts" class="kuiLocalTabs" role="navigation">
-          <a class="kuiLocalTab" data-test-subj="clusterAlertsListingPage">Cluster Alerts</a>
+          <a
+            class="kuiLocalTab"
+            data-test-subj="clusterAlertsListingPage"
+            i18n-id="xpack.monitoring.main.clusterAlertsNavigation.clusterAlertsLinkText"
+            i18n-default-message="Cluster Alerts"
+          ></a>
         </div>
 
         <div ng-if="monitoringMain.inListing" class="kuiLocalTabs" role="navigation">
-         <a class="kuiLocalTab">Clusters</a>
+         <a
+          class="kuiLocalTab"
+          i18n-id="xpack.monitoring.main.clustersNavigation.clustersLinkText"
+          i18n-default-message="Clusters"
+        ></a>
        </div>
       </div>
     </div>
diff --git a/x-pack/plugins/monitoring/public/views/apm/instances/index.js b/x-pack/plugins/monitoring/public/views/apm/instances/index.js
index e928289db61eb..9d91d64d2fbec 100644
--- a/x-pack/plugins/monitoring/public/views/apm/instances/index.js
+++ b/x-pack/plugins/monitoring/public/views/apm/instances/index.js
@@ -11,6 +11,7 @@ import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
 import template from './index.html';
 import { ApmServerInstances } from '../../../components/apm/instances';
 import { MonitoringViewBaseTableController } from '../../base_table_controller';
+import { I18nProvider } from '@kbn/i18n/react';
 
 uiRoutes.when('/apm/instances', {
   template,
@@ -53,16 +54,18 @@ uiRoutes.when('/apm/instances', {
       } = this;
 
       const component = (
-        <ApmServerInstances
-          apms={{
-            pageIndex,
-            filterText,
-            sortKey,
-            sortOrder,
-            onNewState,
-            data,
-          }}
-        />
+        <I18nProvider>
+          <ApmServerInstances
+            apms={{
+              pageIndex,
+              filterText,
+              sortKey,
+              sortOrder,
+              onNewState,
+              data,
+            }}
+          />
+        </I18nProvider>
       );
       super.renderReact(component);
     }
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/indices/index.js b/x-pack/plugins/monitoring/public/views/elasticsearch/indices/index.js
index b71b8f43814f6..07b291dbe020d 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/indices/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/indices/index.js
@@ -11,6 +11,7 @@ import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
 import { MonitoringViewBaseTableController } from '../../';
 import { ElasticsearchIndices } from '../../../components';
 import template from './index.html';
+import { I18nProvider } from '@kbn/i18n/react';
 
 uiRoutes.when('/elasticsearch/indices', {
   template,
@@ -60,12 +61,14 @@ uiRoutes.when('/elasticsearch/indices', {
 
       this.renderReact = ({ clusterStatus, indices }) => {
         super.renderReact(
-          <ElasticsearchIndices
-            clusterStatus={clusterStatus}
-            indices={indices}
-            showSystemIndices={showSystemIndices}
-            toggleShowSystemIndices={toggleShowSystemIndices}
-          />
+          <I18nProvider>
+            <ElasticsearchIndices
+              clusterStatus={clusterStatus}
+              indices={indices}
+              showSystemIndices={showSystemIndices}
+              toggleShowSystemIndices={toggleShowSystemIndices}
+            />
+          </I18nProvider>
         );
       };
     }
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/nodes/index.js b/x-pack/plugins/monitoring/public/views/elasticsearch/nodes/index.js
index 295ad6d1d36a8..20e339aa52b87 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/nodes/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/nodes/index.js
@@ -11,6 +11,7 @@ import template from './index.html';
 import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
 import { MonitoringViewBaseTableController } from '../../';
 import { ElasticsearchNodes } from '../../../components';
+import { I18nProvider } from '@kbn/i18n/react';
 
 uiRoutes.when('/elasticsearch/nodes', {
   template,
@@ -47,11 +48,13 @@ uiRoutes.when('/elasticsearch/nodes', {
 
       this.renderReact = ({ clusterStatus, nodes }) => {
         super.renderReact(
-          <ElasticsearchNodes
-            clusterStatus={clusterStatus}
-            nodes={nodes}
-            showCgroupMetricsElasticsearch={showCgroupMetricsElasticsearch}
-          />
+          <I18nProvider>
+            <ElasticsearchNodes
+              clusterStatus={clusterStatus}
+              nodes={nodes}
+              showCgroupMetricsElasticsearch={showCgroupMetricsElasticsearch}
+            />
+          </I18nProvider>
         );
       };
     }
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/overview/controller.js b/x-pack/plugins/monitoring/public/views/elasticsearch/overview/controller.js
index 908a2461d6dd8..6eee4e4cec09d 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/overview/controller.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/overview/controller.js
@@ -8,6 +8,7 @@ import React from 'react';
 import { find } from 'lodash';
 import { MonitoringViewBaseController } from '../../';
 import { ElasticsearchOverview } from 'plugins/monitoring/components';
+import { I18nProvider } from '@kbn/i18n/react';
 
 export class ElasticsearchOverviewController extends MonitoringViewBaseController {
   constructor($injector, $scope) {
@@ -70,14 +71,16 @@ export class ElasticsearchOverviewController extends MonitoringViewBaseControlle
     const { clusterStatus, metrics, shardActivity } = data;
     const shardActivityData = shardActivity && this.filterShardActivityData(shardActivity); // no filter on data = null
     const component = (
-      <ElasticsearchOverview
-        clusterStatus={clusterStatus}
-        metrics={metrics}
-        shardActivity={shardActivityData}
-        onBrush={this.onBrush}
-        showShardActivityHistory={this.showShardActivityHistory}
-        toggleShardActivityHistory={this.toggleShardActivityHistory}
-      />
+      <I18nProvider>
+        <ElasticsearchOverview
+          clusterStatus={clusterStatus}
+          metrics={metrics}
+          shardActivity={shardActivityData}
+          onBrush={this.onBrush}
+          showShardActivityHistory={this.showShardActivityHistory}
+          toggleShardActivityHistory={this.toggleShardActivityHistory}
+        />
+      </I18nProvider>
     );
 
     super.renderReact(component);

From d3a497b31f0202c76c6978af225de23fbf76d072 Mon Sep 17 00:00:00 2001
From: Alexandr Ogarkov <nox.911@gmail.com>
Date: Thu, 1 Nov 2018 18:10:39 +0300
Subject: [PATCH 2/4] Fix issues

---
 .../public/components/table/table.js          |  2 +-
 .../public/directives/main/index.html         | 46 +++++++++----------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/x-pack/plugins/monitoring/public/components/table/table.js b/x-pack/plugins/monitoring/public/components/table/table.js
index ca33fa30401d1..1265cf8c487f2 100644
--- a/x-pack/plugins/monitoring/public/components/table/table.js
+++ b/x-pack/plugins/monitoring/public/components/table/table.js
@@ -125,7 +125,7 @@ class MonitoringTableUI extends React.Component {
         throw new Error(
           this.props.intl.formatMessage({
             id: 'xpack.monitoring.table.unknownTableActionTypeErrorMessage',
-            defaultMessage: 'Unknown table action type {action}! This shouldn\'t happen!' }, {
+            defaultMessage: `Unknown table action type {action}! This shouldn't happen!` }, {
             action
           })
         );
diff --git a/x-pack/plugins/monitoring/public/directives/main/index.html b/x-pack/plugins/monitoring/public/directives/main/index.html
index c3b1f04e1f4f9..d21c9cfba59a2 100644
--- a/x-pack/plugins/monitoring/public/directives/main/index.html
+++ b/x-pack/plugins/monitoring/public/directives/main/index.html
@@ -36,7 +36,7 @@
             kbn-href="#/elasticsearch"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('overview')}"
-            i18n-id="xpack.monitoring.main.esNavigation.overviewLinkText"
+            i18n-id="xpack.monitoring.esNavigation.overviewLinkText"
             i18n-default-message="Overview"
           ></a>
           <a
@@ -44,7 +44,7 @@
             kbn-href="#/elasticsearch/nodes"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('nodes')}"
-            i18n-id="xpack.monitoring.main.esNavigation.nodesLinkText"
+            i18n-id="xpack.monitoring.esNavigation.nodesLinkText"
             i18n-default-message="Nodes"
           ></a>
           <a
@@ -52,7 +52,7 @@
             kbn-href="#/elasticsearch/indices"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('indices')}"
-            i18n-id="xpack.monitoring.main.esNavigation.indicesLinkText"
+            i18n-id="xpack.monitoring.esNavigation.indicesLinkText"
             i18n-default-message="Indices"
           ></a>
           <a
@@ -60,7 +60,7 @@
             kbn-href="#/elasticsearch/ml_jobs"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('ml')}"
-            i18n-id="xpack.monitoring.main.esNavigation.jobsLinkText"
+            i18n-id="xpack.monitoring.esNavigation.jobsLinkText"
             i18n-default-message="Jobs"
           ></a>
           <a
@@ -68,7 +68,7 @@
             kbn-href="#/elasticsearch/ccr"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('ccr')}"
-            i18n-id="xpack.monitoring.main.esNavigation.ccrLinkText"
+            i18n-id="xpack.monitoring.esNavigation.ccrLinkText"
             i18n-default-message="CCR"
           ></a>
           <a
@@ -79,7 +79,7 @@
           >
             <span ng-if="monitoringMain.tabIconClass" class="fa {{ monitoringMain.tabIconClass }}" title="{{ monitoringMain.tabIconLabel }}"></span>
             <span
-              i18n-id="xpack.monitoring.main.esNavigation.instance.overviewLinkText"
+              i18n-id="xpack.monitoring.esNavigation.instance.overviewLinkText"
               i18n-default-message="Overview"
             ></span>
           </a>
@@ -88,7 +88,7 @@
             kbn-href="#/elasticsearch/{{ monitoringMain.name }}/{{ monitoringMain.resolver }}/advanced"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.page === 'advanced'}"
-            i18n-id="xpack.monitoring.main.esNavigation.instance.advancedLinkText"
+            i18n-id="xpack.monitoring.esNavigation.instance.advancedLinkText"
             i18n-default-message="Advanced"
           >
           </a>
@@ -104,7 +104,7 @@
             kbn-href="#/kibana"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('overview')}"
-            i18n-id="xpack.monitoring.main.kibanaNavigation.overviewLinkText"
+            i18n-id="xpack.monitoring.kibanaNavigation.overviewLinkText"
             i18n-default-message="Overview"
           ></a>
           <a
@@ -112,7 +112,7 @@
             kbn-href="#/kibana/instances"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('kibanas')}"
-            i18n-id="xpack.monitoring.main.kibanaNavigation.instancesLinkText"
+            i18n-id="xpack.monitoring.kibanaNavigation.instancesLinkText"
             i18n-default-message="Instances"
           ></a>
           <a ng-if="monitoringMain.instance" class="kuiLocalTab">{{ monitoringMain.instance }}</a>
@@ -124,7 +124,7 @@
             kbn-href="#/apm"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('overview')}"
-            i18n-id="xpack.monitoring.main.apmNavigation.overviewLinkText"
+            i18n-id="xpack.monitoring.apmNavigation.overviewLinkText"
             i18n-default-message="Overview"
           ></a>
           <a
@@ -132,7 +132,7 @@
             kbn-href="#/apm/instances"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('apms')}"
-            i18n-id="xpack.monitoring.main.apmNavigation.instancesLinkText"
+            i18n-id="xpack.monitoring.apmNavigation.instancesLinkText"
             i18n-default-message="Instances"
           ></a>
           <a ng-if="monitoringMain.instance" class="kuiLocalTab">{{ monitoringMain.instance }}</a>
@@ -145,7 +145,7 @@
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected':
             monitoringMain.isActiveTab('overview')}"
-            i18n-id="xpack.monitoring.main.beatsNavigation.overviewLinkText"
+            i18n-id="xpack.monitoring.beatsNavigation.overviewLinkText"
             i18n-default-message="Overview"
           >
           </a>
@@ -154,7 +154,7 @@
             kbn-href="#/beats/beats"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('beats')}"
-            i18n-id="xpack.monitoring.main.beatsNavigation.instancesLinkText"
+            i18n-id="xpack.monitoring.beatsNavigation.instancesLinkText"
             i18n-default-message="Instances"
           >
           </a>
@@ -163,7 +163,7 @@
             kbn-href="#/beats/beat/{{ monitoringMain.resolver }}"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.page === 'overview'}"
-            i18n-id="xpack.monitoring.main.beatsNavigation.instance.overviewLinkText"
+            i18n-id="xpack.monitoring.beatsNavigation.instance.overviewLinkText"
             i18n-default-message="Overview"
           >
           </a>
@@ -175,7 +175,7 @@
             kbn-href="#/logstash"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('overview')}"
-            i18n-id="xpack.monitoring.main.logstashNavigation.overviewLinkText"
+            i18n-id="xpack.monitoring.logstashNavigation.overviewLinkText"
             i18n-default-message="Overview"
           >
           </a>
@@ -184,7 +184,7 @@
             kbn-href="#/logstash/nodes"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('nodes')}"
-            i18n-id="xpack.monitoring.main.logstashNavigation.nodesLinkText"
+            i18n-id="xpack.monitoring.logstashNavigation.nodesLinkText"
             i18n-default-message="Nodes"
           >
           </a>
@@ -196,7 +196,7 @@
           >
             <span class="kuiIcon fa-flask betaIcon" tooltip="Beta Feature" />
             <span
-              i18n-id="xpack.monitoring.main.logstashNavigation.pipelinesLinkText"
+              i18n-id="xpack.monitoring.logstashNavigation.pipelinesLinkText"
               i18n-default-message="Pipelines"
             ></span>
           </a>
@@ -205,7 +205,7 @@
             kbn-href="#/logstash/node/{{ monitoringMain.resolver }}"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.page === 'overview'}"
-            i18n-id="xpack.monitoring.main.logstashNavigation.instance.overviewLinkText"
+            i18n-id="xpack.monitoring.logstashNavigation.instance.overviewLinkText"
             i18n-default-message="Overview"
           >
           </a>
@@ -217,7 +217,7 @@
           >
             <span class="kuiIcon fa-flask betaIcon" tooltip="Beta Feature" />
             <span
-              i18n-id="xpack.monitoring.main.logstashNavigation.instance.pipelinesLinkText"
+              i18n-id="xpack.monitoring.logstashNavigation.instance.pipelinesLinkText"
               i18n-default-message="Pipelines"
             ></span>
           </a>
@@ -226,7 +226,7 @@
             kbn-href="#/logstash/node/{{ monitoringMain.resolver }}/advanced"
             class="kuiLocalTab"
             ng-class="{'kuiLocalTab-isSelected': monitoringMain.page === 'advanced'}"
-            i18n-id="xpack.monitoring.main.logstashNavigation.instance.AdvancedLinkText"
+            i18n-id="xpack.monitoring.logstashNavigation.instance.advancedLinkText"
             i18n-default-message="Advanced"
           >
           </a>
@@ -243,7 +243,7 @@ <h1 class="kuiTitle kuiFlexItem">{{ monitoringMain.pipelineId }}</h1>
               <option
                 ng-repeat="version in monitoringMain.pipelineVersions"
                 ng-value="version.hash"
-                i18n-id="xpack.monitoring.main.logstashNavigation.pipelineVersionDescription"
+                i18n-id="xpack.monitoring.logstashNavigation.pipelineVersionDescription"
                 i18n-default-message="Version active {relativeLastSeen} and first seen {relativeFirstSeen}"
                 i18n-values="{relativeLastSeen: version.relativeLastSeen, relativeFirstSeen: version.relativeFirstSeen}"
               >
@@ -260,7 +260,7 @@ <h1 class="kuiTitle kuiFlexItem">{{ monitoringMain.pipelineId }}</h1>
           <a
             class="kuiLocalTab"
             data-test-subj="clusterAlertsListingPage"
-            i18n-id="xpack.monitoring.main.clusterAlertsNavigation.clusterAlertsLinkText"
+            i18n-id="xpack.monitoring.clusterAlertsNavigation.clusterAlertsLinkText"
             i18n-default-message="Cluster Alerts"
           ></a>
         </div>
@@ -268,7 +268,7 @@ <h1 class="kuiTitle kuiFlexItem">{{ monitoringMain.pipelineId }}</h1>
         <div ng-if="monitoringMain.inListing" class="kuiLocalTabs" role="navigation">
          <a
           class="kuiLocalTab"
-          i18n-id="xpack.monitoring.main.clustersNavigation.clustersLinkText"
+          i18n-id="xpack.monitoring.clustersNavigation.clustersLinkText"
           i18n-default-message="Clusters"
         ></a>
        </div>

From ae38a0cfd1a070fefee9a21a4949000fcc1bb4ee Mon Sep 17 00:00:00 2001
From: Alexandr Ogarkov <nox.911@gmail.com>
Date: Fri, 2 Nov 2018 14:01:55 +0300
Subject: [PATCH 3/4] Fix tests

---
 .../summary_status/summary_status.js           | 18 ++++++++++--------
 .../summary_status/summary_status.test.js      |  8 ++++----
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js b/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js
index 742e978b70406..3e65e6ea65790 100644
--- 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,7 +9,8 @@ import PropTypes from 'prop-types';
 import { isEmpty, capitalize } from 'lodash';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { StatusIcon } from '../status_icon/index.js';
-import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 
 const wrapChild = ({ label, value, dataTestSubj }, index) => (
   <EuiFlexItem
@@ -28,7 +29,7 @@ const wrapChild = ({ label, value, dataTestSubj }, index) => (
   </EuiFlexItem>
 );
 
-const DefaultIconComponent = injectI18n(({ status, intl }) => (
+const DefaultIconComponent = ({ status }) => (
   <Fragment>
     <FormattedMessage
       id="xpack.monitoring.summaryStatus.statusIconTitle"
@@ -37,17 +38,18 @@ const DefaultIconComponent = injectI18n(({ status, intl }) => (
         statusIcon: (
           <StatusIcon
             type={status.toUpperCase()}
-            label={intl.formatMessage({
-              id: 'xpack.monitoring.summaryStatus.statusIconLabel',
-              defaultMessage: 'Status: {status}' }, {
-              status
+            label={i18n.translate('xpack.monitoring.summaryStatus.statusIconLabel', {
+              defaultMessage: 'Status: {status}',
+              values: {
+                status
+              }
             })}
           />
         )
       }}
     />
   </Fragment>
-));
+);
 
 const StatusIndicator = ({ status, isOnline, IconComponent }) => {
   if (isEmpty(status)) {
@@ -66,7 +68,7 @@ const StatusIndicator = ({ status, isOnline, IconComponent }) => {
   );
 };
 
-export function SummaryStatus({ metrics, status, isOnline, IconComponent = DefaultIconComponent, ...props }) {
+export function SummaryStatus({ metrics, status, isOnline, IconComponent = DefaultIconComponent, intl, ...props }) {
   return (
     <div className="monSummaryStatus" role="status">
       <div {...props}>
diff --git a/x-pack/plugins/monitoring/public/components/summary_status/summary_status.test.js b/x-pack/plugins/monitoring/public/components/summary_status/summary_status.test.js
index f142ed545a992..d66c1dd54619c 100644
--- a/x-pack/plugins/monitoring/public/components/summary_status/summary_status.test.js
+++ b/x-pack/plugins/monitoring/public/components/summary_status/summary_status.test.js
@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
+import { renderWithIntl } from '../../../../../test_utils/enzyme_helpers';
 import { SummaryStatus } from './summary_status';
 
 describe('Summary Status Component', () => {
@@ -26,7 +26,7 @@ describe('Summary Status Component', () => {
       status: 'green'
     };
 
-    expect(render(<SummaryStatus {...props} />)).toMatchSnapshot();
+    expect(renderWithIntl(<SummaryStatus {...props} />)).toMatchSnapshot();
   });
 
   it('should allow label to be optional', () => {
@@ -45,7 +45,7 @@ describe('Summary Status Component', () => {
       status: 'yellow'
     };
 
-    expect(render(<SummaryStatus {...props} />)).toMatchSnapshot();
+    expect(renderWithIntl(<SummaryStatus {...props} />)).toMatchSnapshot();
   });
 
   it('should allow status to be optional', () => {
@@ -64,6 +64,6 @@ describe('Summary Status Component', () => {
       ]
     };
 
-    expect(render(<SummaryStatus {...props} />)).toMatchSnapshot();
+    expect(renderWithIntl(<SummaryStatus {...props} />)).toMatchSnapshot();
   });
 });

From 21bfb81a8289704a68724160d5c669cc99b12087 Mon Sep 17 00:00:00 2001
From: Alexandr Ogarkov <nox.911@gmail.com>
Date: Fri, 2 Nov 2018 16:54:03 +0300
Subject: [PATCH 4/4] Add disable eslint for unused var  intl

---
 .../public/components/summary_status/summary_status.js           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js b/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js
index 3e65e6ea65790..268500cb3fa5e 100644
--- a/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js
+++ b/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js
@@ -68,6 +68,7 @@ const StatusIndicator = ({ status, isOnline, IconComponent }) => {
   );
 };
 
+// eslint-disable-next-line no-unused-vars
 export function SummaryStatus({ metrics, status, isOnline, IconComponent = DefaultIconComponent, intl, ...props }) {
   return (
     <div className="monSummaryStatus" role="status">