Feature/translate monitoring elasticsearch part 2 (#24734)

* Translate monitoring -> view -> elasticsearch * Fix issues * Translate monitoring - view - elasticsearch and kibana * Fix issues * Fix issues * Fix issues * Fix placeholder value
2025-04-24 09:48:58 -04:00 · 2018-11-16 09:04:46 +03:00 · 2018-11-16 09:04:46 +03:00 · 359c852c76
commit 359c852c76
parent c7a29aa7d2
25 changed files with 315 additions and 77 deletions
--- 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,16 +20,48 @@ import { LARGE_ABBREVIATED, LARGE_BYTES } from '../../../../common/formatting';
 import {
  EuiLink,
 } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { I18nProvider } from '@kbn/i18n/react';

 const filterFields = [ 'job_id', 'state', 'node.name' ];
 const columns = [
-  { title: 'Job ID', sortKey: 'job_id', sortOrder: SORT_ASCENDING },
-  { title: 'State', sortKey: 'state' },
-  { title: 'Processed Records', sortKey: 'data_counts.processed_record_count' },
-  { title: 'Model Size', sortKey: 'model_size_stats.model_bytes' },
-  { title: 'Forecasts', sortKey: 'forecasts_stats.total' },
-  { title: 'Node', sortKey: 'node.name' }
+  {
+    title: i18n.translate('xpack.monitoring.elasticsearch.mlJobListing.jobIdTitle', {
+      defaultMessage: 'Job ID'
+    }),
+    sortKey: 'job_id',
+    sortOrder: SORT_ASCENDING
+  },
+  {
+    title: i18n.translate('xpack.monitoring.elasticsearch.mlJobListing.stateTitle', {
+      defaultMessage: 'State'
+    }),
+    sortKey: 'state'
+  },
+  {
+    title: i18n.translate('xpack.monitoring.elasticsearch.mlJobListing.processedRecordsTitle', {
+      defaultMessage: 'Processed Records'
+    }),
+    sortKey: 'data_counts.processed_record_count'
+  },
+  {
+    title: i18n.translate('xpack.monitoring.elasticsearch.mlJobListing.modelSizeTitle', {
+      defaultMessage: 'Model Size'
+    }),
+    sortKey: 'model_size_stats.model_bytes'
+  },
+  {
+    title: i18n.translate('xpack.monitoring.elasticsearch.mlJobListing.forecastsTitle', {
+      defaultMessage: 'Forecasts'
+    }),
+    sortKey: 'forecasts_stats.total'
+  },
+  {
+    title: i18n.translate('xpack.monitoring.elasticsearch.mlJobListing.nodeTitle', {
+      defaultMessage: 'Node'
+    }),
+    sortKey: 'node.name'
+  }
 ];
 const jobRowFactory = (scope, kbnUrl) => {
  const goToNode = nodeId => {
@ -45,7 +77,9 @@ const jobRowFactory = (scope, kbnUrl) => {
        </EuiLink>
      );
    }
-    return 'N/A';
+    return i18n.translate('xpack.monitoring.elasticsearch.mlJobListing.noDataLabel', {
+      defaultMessage: 'N/A'
+    });
  };

  return function JobRow(props) {
@ -68,7 +102,7 @@ const jobRowFactory = (scope, kbnUrl) => {
 };

 const uiModule = uiModules.get('monitoring/directives', []);
-uiModule.directive('monitoringMlListing', kbnUrl => {
+uiModule.directive('monitoringMlListing', (kbnUrl, i18n) => {
  return {
    restrict: 'E',
    scope: {
@ -84,13 +118,24 @@ uiModule.directive('monitoringMlListing', kbnUrl => {
      const getNoDataMessage = filterText => {
        if (filterText) {
          return (
-            `There are no Machine Learning Jobs that match the filter [${filterText.trim()}] or the time range.
-Try changing the filter or time range.`
+            i18n('xpack.monitoring.elasticsearch.mlJobListing.noFilteredJobsDescription', {
+              // eslint-disable-next-line max-len
+              defaultMessage: 'There are no Machine Learning Jobs that match the filter [{filterText}] or the time range. Try changing the filter or time range.',
+              values: {
+                filterText: filterText.trim()
+              }
+            })
          );
        }
-        return 'There are no Machine Learning Jobs that match your query. Try changing the time range selection.';
+        return i18n('xpack.monitoring.elasticsearch.mlJobListing.noJobsDescription', {
+          defaultMessage: 'There are no Machine Learning Jobs that match your query. Try changing the time range selection.'
+        });
      };

+      const filterJobsPlaceholder = i18n('xpack.monitoring.elasticsearch.mlJobListing.filterJobsPlaceholder', {
+        defaultMessage: 'Filter Jobs…'
+      });
+
      scope.$watch('jobs', (jobs = []) => {
        const mlTable = (
          <I18nProvider>
@ -102,7 +147,7 @@ Try changing the filter or time range.`
              sortKey={scope.sortKey}
              sortOrder={scope.sortOrder}
              onNewState={scope.onNewState}
-              placeholder="Filter Jobs..."
+              placeholder={filterJobsPlaceholder}
              filterFields={filterFields}
              columns={columns}
              rowComponent={jobRowFactory(scope, kbnUrl)}
--- a/x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/components/clusterView.js
+++ b/x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/components/clusterView.js
@ -9,9 +9,12 @@
 import React from 'react';
 import { TableHead } from './tableHead';
 import { TableBody } from './tableBody';
+import { i18n } from '@kbn/i18n';

 export class ClusterView extends React.Component {
-  static displayName = 'ClusterView';
+  static displayName = i18n.translate('xpack.monitoring.elasticsearch.shardAllocation.clusterViewDisplayName', {
+    defaultMessage: 'ClusterView',
+  });

  constructor(props) {
    super(props);
--- a/x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/components/shard.js
+++ b/x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/components/shard.js
@ -9,9 +9,12 @@
 import React from 'react';
 import { calculateClass } from '../lib/calculateClass';
 import { vents } from '../lib/vents';
+import { i18n } from '@kbn/i18n';

 export class Shard extends React.Component {
-  static displayName = 'Shard';
+  static displayName = i18n.translate('xpack.monitoring.elasticsearch.shardAllocation.shardDisplayName', {
+    defaultMessage: 'Shard',
+  });
  state = { tooltipVisible: false };

  componentDidMount() {
--- a/x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/components/tableBody.js
+++ b/x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/components/tableBody.js
@ -9,6 +9,8 @@
 import React from 'react';
 import { Unassigned } from './unassigned';
 import { Assigned } from './assigned';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';

 const ShardRow = props => {
  let unassigned;
@ -34,7 +36,9 @@ const ShardRow = props => {
 };

 export class TableBody extends React.Component {
-  static displayName = 'TableBody';
+  static displayName = i18n.translate('xpack.monitoring.elasticsearch.shardAllocation.tableBodyDisplayName', {
+    defaultMessage: 'TableBody',
+  });

  createRow = (data, index) => {
    return (
@ -55,7 +59,10 @@ export class TableBody extends React.Component {
            <td colSpan={this.props.cols}>
              <div>
                <p style={{ margin: '10px 0' }} className="text-center lead">
-                  There are no shards allocated.
+                  <FormattedMessage
+                    id="xpack.monitoring.elasticsearch.shardAllocation.tableBody.noShardsAllocatedDescription"
+                    defaultMessage="There are no shards allocated."
+                  />
                </p>
              </div>
            </td>
--- a/x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/components/tableHead.js
+++ b/x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/components/tableHead.js
@ -12,6 +12,7 @@ import {
  EuiFlexItem,
  EuiSwitch,
 } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';

 class IndexLabel extends React.Component {

@ -38,7 +39,10 @@ class IndexLabel extends React.Component {
        <EuiFlexItem
          grow={false}
        >
-          Indices
+          <FormattedMessage
+            id="xpack.monitoring.elasticsearch.shardAllocation.tableHead.indicesLabel"
+            defaultMessage="Indices"
+          />
        </EuiFlexItem>
        <EuiFlexItem>
          <EuiSwitch
--- a/x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/components/unassigned.js
+++ b/x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/components/unassigned.js
@ -9,9 +9,12 @@
 import _ from 'lodash';
 import React from 'react';
 import { Shard } from './shard';
+import { i18n } from '@kbn/i18n';

 export class Unassigned extends React.Component {
-  static displayName = 'Unassigned';
+  static displayName = i18n.translate('xpack.monitoring.elasticsearch.shardAllocation.unassignedDisplayName', {
+    defaultMessage: 'Unassigned',
+  });

  createShard = (shard) => {
    const type = shard.primary ? 'primary' : 'replica';
--- a/x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/directives/clusterView.js
+++ b/x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/directives/clusterView.js
@ -10,6 +10,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { ClusterView } from '../components/clusterView';
 import { uiModules } from 'ui/modules';
+import { I18nProvider } from '@kbn/i18n/react';

 const uiModule = uiModules.get('monitoring/directives', []);
 uiModule.directive('clusterView', kbnUrl => {
@ -26,12 +27,14 @@ uiModule.directive('clusterView', kbnUrl => {
    },
    link: function (scope, element) {
      ReactDOM.render(
-        <ClusterView
-          scope={scope}
-          kbnUrl={kbnUrl}
-          showSystemIndices={scope.showSystemIndices}
-          toggleShowSystemIndices={scope.toggleShowSystemIndices}
-        />,
+        <I18nProvider>
+          <ClusterView
+            scope={scope}
+            kbnUrl={kbnUrl}
+            showSystemIndices={scope.showSystemIndices}
+            toggleShowSystemIndices={scope.toggleShowSystemIndices}
+          />
+        </I18nProvider>,
        element[0]
      );
    }
--- a/x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/index.html
+++ b/x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/index.html
@ -1,19 +1,49 @@
 <div class="page-row">
  <div class="monCluster">
-    <h1 class="monClusterTitle">Shard Legend</h1>
+    <h1
+      class="monClusterTitle"
+      i18n-id="xpack.monitoring.elasticsearch.shardAllocation.shardLegendTitle"
+      i18n-default-message="Shard Legend"
+    ></h1>
    <div class="legend">
      <span class="shard">&nbsp;</span>
-      <span class="shard-label">Primary</span>
+      <span
+        class="shard-label"
+        i18n-id="xpack.monitoring.elasticsearch.shardAllocation.primaryLabel"
+        i18n-default-message="Primary"
+      ></span>
      <span class="shard replica">&nbsp;</span>
-      <span class="shard-label">Replica</span>
+      <span
+        class="shard-label"
+        i18n-id="xpack.monitoring.elasticsearch.shardAllocation.replicaLabel"
+        i18n-default-message="Replica"
+      ></span>
      <span class="shard relocating">&nbsp;</span>
-      <span class="shard-label">Relocating</span>
+      <span
+        class="shard-label"
+        i18n-id="xpack.monitoring.elasticsearch.shardAllocation.relocatingLabel"
+        i18n-default-message="Relocating"
+      ></span>
      <span class="shard initializing">&nbsp;</span>
-      <span class="shard-label">Initializing</span>
+      <span
+        class="shard-label"
+        i18n-id="xpack.monitoring.elasticsearch.shardAllocation.initializingLabel"
+        i18n-default-message="Initializing"
+      ></span>
      <span class="shard emergency" ng-if="isIndexView">&nbsp;</span>
-      <span class="shard-label" ng-if="isIndexView">Unassigned Primary</span>
+      <span
+        class="shard-label"
+        ng-if="isIndexView"
+        i18n-id="xpack.monitoring.elasticsearch.shardAllocation.unassignedPrimaryLabel"
+        i18n-default-message="Unassigned Primary"
+      ></span>
      <span class="shard unassigned replica" ng-if="isIndexView">&nbsp;</span>
-      <span class="shard-label" ng-if="isIndexView">Unassigned Replica</span>
+      <span
+        class="shard-label"
+        ng-if="isIndexView"
+        i18n-id="xpack.monitoring.elasticsearch.shardAllocation.unassignedReplicaLabel"
+        i18n-default-message="Unassigned Replica"
+      ></span>
    </div>
    <cluster-view
      shard-stats="shardStats"
--- a/x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/lib/decorate_shards.js
+++ b/x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/lib/decorate_shards.js
@ -6,6 +6,7 @@


 import { capitalize, find, get, includes } from 'lodash';
+import { i18n } from '@kbn/i18n';

 export function decorateShards(shards, nodes) {
  function getTooltipMessage(shard) {
@ -15,10 +16,20 @@ export function decorateShards(shards, nodes) {
    // messages for relocating node
    if (nodeName) {
      if (shard.state === 'INITIALIZING') {
-        return `Relocating from ${nodeName}`;
+        return i18n.translate('xpack.monitoring.elasticsearch.shardAllocation.decorateShards.relocatingFromTextMessage', {
+          defaultMessage: 'Relocating from {nodeName}',
+          values: {
+            nodeName
+          }
+        });
      }
      if (shard.state === 'RELOCATING') {
-        return `Relocating to ${nodeName}`;
+        return i18n.translate('xpack.monitoring.elasticsearch.shardAllocation.decorateShards.relocatingToTextMessage', {
+          defaultMessage: 'Relocating to {nodeName}',
+          values: {
+            nodeName
+          }
+        });
      }
    }
    return capitalize(shard.state.toLowerCase());
--- a/x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/lib/labels.js
+++ b/x-pack/plugins/monitoring/public/directives/elasticsearch/shard_allocation/lib/labels.js
@ -8,19 +8,33 @@

 // The ui had different columns in different order depending on the
 // $scope.view variable. This provides a lookup for the column headers
+
+import { i18n } from '@kbn/i18n';
+
 export const labels = {
  // "index detail" page shows nodes on which index shards are allocated
  index: [
-    { content: 'Nodes' }
+    { content: i18n.translate('xpack.monitoring.elasticsearch.shardAllocation.labels.nodesLabel', {
+      defaultMessage: 'Nodes',
+    })
+    }
  ],
  indexWithUnassigned: [
-    { content: 'Unassigned' },
-    { content: 'Nodes' }
+    { content: i18n.translate('xpack.monitoring.elasticsearch.shardAllocation.labels.unassignedLabel', {
+      defaultMessage: 'Unassigned',
+    })
+    },
+    { content: i18n.translate('xpack.monitoring.elasticsearch.shardAllocation.labels.unassignedNodesLabel', {
+      defaultMessage: 'Nodes',
+    })
+    }
  ],
  // "node detail" page shows the indexes that have shards on this node
  node: [
    {
-      content: 'Indices',
+      content: i18n.translate('xpack.monitoring.elasticsearch.shardAllocation.labels.indicesLabel', {
+        defaultMessage: 'Indices',
+      }),
      showToggleSystemIndicesComponent: true // tell the TableHead component to inject checkbox JSX to show/hide system indices
    }
  ]
--- a/x-pack/plugins/monitoring/public/directives/kibana/listing/index.js
+++ b/x-pack/plugins/monitoring/public/directives/kibana/listing/index.js
@ -22,16 +22,48 @@ import {
 import {
  EuiLink,
 } from '@elastic/eui';
-import { I18nProvider } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage, injectI18n, I18nProvider } from '@kbn/i18n/react';

 const filterFields = [ 'kibana.name', 'kibana.host', 'kibana.status', 'kibana.transport_address' ];
 const columns = [
-  { title: 'Name', sortKey: 'kibana.name', sortOrder: SORT_ASCENDING },
-  { title: 'Status', sortKey: 'kibana.status' },
-  { title: 'Load Average', sortKey: 'os.load.1m' },
-  { title: 'Memory Size', sortKey: 'process.memory.resident_set_size_in_bytes' },
-  { title: 'Requests', sortKey: 'requests.total' },
-  { title: 'Response Times', sortKey: 'response_times.average' }
+  {
+    title: i18n.translate('xpack.monitoring.kibana.listing.nameColumnTitle', {
+      defaultMessage: 'Name'
+    }),
+    sortKey: 'kibana.name',
+    sortOrder: SORT_ASCENDING
+  },
+  {
+    title: i18n.translate('xpack.monitoring.kibana.listing.statusColumnTitle', {
+      defaultMessage: 'Status'
+    }),
+    sortKey: 'kibana.status'
+  },
+  {
+    title: i18n.translate('xpack.monitoring.kibana.listing.loadAverageColumnTitle', {
+      defaultMessage: 'Load Average'
+    }),
+    sortKey: 'os.load.1m'
+  },
+  {
+    title: i18n.translate('xpack.monitoring.kibana.listing.memorySizeColumnTitle', {
+      defaultMessage: 'Memory Size'
+    }),
+    sortKey: 'process.memory.resident_set_size_in_bytes'
+  },
+  {
+    title: i18n.translate('xpack.monitoring.kibana.listing.requestsColumnTitle', {
+      defaultMessage: 'Requests'
+    }),
+    sortKey: 'requests.total'
+  },
+  {
+    title: i18n.translate('xpack.monitoring.kibana.listing.responseTimeColumnTitle', {
+      defaultMessage: 'Response Times'
+    }),
+    sortKey: 'response_times.average'
+  },
 ];
 const instanceRowFactory = (scope, kbnUrl) => {
  const goToInstance = uuid => {
@ -40,7 +72,7 @@ const instanceRowFactory = (scope, kbnUrl) => {
    });
  };

-  return function KibanaRow(props) {
+  return injectI18n(function KibanaRow(props) {
    return (
      <KuiTableRow>
        <KuiTableRowCell>
@ -55,9 +87,25 @@ const instanceRowFactory = (scope, kbnUrl) => {
          <div className="monTableCell__transportAddress">{ get(props, 'kibana.transport_address') }</div>
        </KuiTableRowCell>
        <KuiTableRowCell>
-          <div title={`Instance status: ${props.kibana.status}`} className="monTableCell__status">
+          <div
+            className="monTableCell__status"
+            title={
+              props.intl.formatMessage({
+                id: 'xpack.monitoring.kibana.listing.instanceStatusTitle',
+                defaultMessage: 'Instance status: {kibanaStatus}'
+              }, {
+                kibanaStatus: props.kibana.status
+              }
+              )
+            }
+          >
            <KibanaStatusIcon status={props.kibana.status} availability={props.availability} />&nbsp;
-            { !props.availability ? 'Offline' : capitalize(props.kibana.status) }
+            { !props.availability ? (
+              <FormattedMessage
+                id="xpack.monitoring.kibana.listing.instanceStatus.offlineLabel"
+                defaultMessage="Offline"
+              />
+            ) : capitalize(props.kibana.status) }
          </div>
        </KuiTableRowCell>
        <KuiTableRowCell>
@ -85,11 +133,11 @@ const instanceRowFactory = (scope, kbnUrl) => {
        </KuiTableRowCell>
      </KuiTableRow>
    );
-  };
+  });
 };

 const uiModule = uiModules.get('monitoring/directives', []);
-uiModule.directive('monitoringKibanaListing', kbnUrl => {
+uiModule.directive('monitoringKibanaListing', (kbnUrl, i18n) => {
  return {
    restrict: 'E',
    scope: {
@ -101,6 +149,9 @@ uiModule.directive('monitoringKibanaListing', kbnUrl => {
      onNewState: '=',
    },
    link(scope, $el) {
+      const filterInstancesPlaceholder = i18n('xpack.monitoring.kibana.listing.filterInstancesPlaceholder', {
+        defaultMessage: 'Filter Instances…'
+      });

      scope.$watch('instances', (instances = []) => {
        const kibanasTable = (
@ -113,7 +164,7 @@ uiModule.directive('monitoringKibanaListing', kbnUrl => {
              sortKey={scope.sortKey}
              sortOrder={scope.sortOrder}
              onNewState={scope.onNewState}
-              placeholder="Filter Instances..."
+              placeholder={filterInstancesPlaceholder}
              filterFields={filterFields}
              columns={columns}
              rowComponent={instanceRowFactory(scope, kbnUrl)}
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/index.js
@ -23,9 +23,11 @@ uiRoutes.when('/elasticsearch/ccr', {
  },
  controllerAs: 'elasticsearchCcr',
  controller: class ElasticsearchCcrController extends MonitoringViewBaseController {
-    constructor($injector, $scope) {
+    constructor($injector, $scope, i18n) {
      super({
-        title: 'Elasticsearch - Ccr',
+        title: i18n('xpack.monitoring.elasticsearch.ccr.routeTitle', {
+          defaultMessage: 'Elasticsearch - Ccr'
+        }),
        reactNodeId: 'elasticsearchCcrReact',
        getPageData,
        $scope,
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/shard/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/shard/index.js
@ -24,16 +24,24 @@ uiRoutes.when('/elasticsearch/ccr/:index/shard/:shardId', {
  },
  controllerAs: 'elasticsearchCcr',
  controller: class ElasticsearchCcrController extends MonitoringViewBaseController {
-    constructor($injector, $scope, pageData) {
+    constructor($injector, $scope, pageData, i18n) {
      super({
-        title: 'Elasticsearch - Ccr - Shard',
+        title: i18n('xpack.monitoring.elasticsearch.ccr.shard.routeTitle', {
+          defaultMessage: 'Elasticsearch - Ccr - Shard'
+        }),
        reactNodeId: 'elasticsearchCcrShardReact',
        getPageData,
        $scope,
        $injector
      });

-      $scope.instance = `Index: ${get(pageData, 'stat.follower_index')} Shard: ${get(pageData, 'stat.shard_id')}`;
+      $scope.instance = i18n('xpack.monitoring.elasticsearch.ccr.shard.instanceTitle', {
+        defaultMessage: 'Index: {followerIndex} Shard: {shardId}',
+        values: {
+          followerIndex: get(pageData, 'stat.follower_index'),
+          shardId: get(pageData, 'stat.shard_id')
+        }
+      });

      $scope.$watch(() => this.data, data => {
        this.renderReact(data);
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/index/advanced/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/index/advanced/index.js
@ -46,7 +46,7 @@ uiRoutes.when('/elasticsearch/indices/:index/advanced', {
    },
    pageData: getPageData
  },
-  controller($injector, $scope) {
+  controller($injector, $scope, i18n) {
    timefilter.enableTimeRangeSelector();
    timefilter.enableAutoRefreshSelector();

@ -57,7 +57,14 @@ uiRoutes.when('/elasticsearch/indices/:index/advanced', {
    $scope.pageData = $route.current.locals.pageData;

    const title = $injector.get('title');
-    title($scope.cluster, `Elasticsearch - Indices - ${$scope.indexName} - Advanced`);
+    const routeTitle = i18n('xpack.monitoring.elasticsearch.indices.advanced.routeTitle', {
+      defaultMessage: 'Elasticsearch - Indices - {indexName} - Advanced',
+      values: {
+        indexName: $scope.indexName
+      }
+    });
+
+    title($scope.cluster, routeTitle);

    const $executor = $injector.get('$executor');
    $executor.register({
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/index/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/index/index.js
@ -46,7 +46,7 @@ uiRoutes.when('/elasticsearch/indices/:index', {
    },
    pageData: getPageData
  },
-  controller($injector, $scope) {
+  controller($injector, $scope, i18n) {
    timefilter.enableTimeRangeSelector();
    timefilter.enableAutoRefreshSelector();

@ -57,7 +57,14 @@ uiRoutes.when('/elasticsearch/indices/:index', {
    $scope.indexName = $route.current.params.index;

    const title = $injector.get('title');
-    title($scope.cluster, `Elasticsearch - Indices - ${$scope.indexName} - Overview`);
+    const routeTitle = i18n('xpack.monitoring.elasticsearch.indices.overview.routeTitle', {
+      defaultMessage: 'Elasticsearch - Indices - {indexName} - Overview',
+      values: {
+        indexName: $scope.indexName
+      }
+    });
+
+    title($scope.cluster, routeTitle);

    const $executor = $injector.get('$executor');
    $executor.register({
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/indices/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/indices/index.js
@ -23,7 +23,7 @@ uiRoutes.when('/elasticsearch/indices', {
  },
  controllerAs: 'elasticsearchIndices',
  controller: class ElasticsearchIndicesController extends MonitoringViewBaseTableController {
-    constructor($injector, $scope) {
+    constructor($injector, $scope, i18n) {
      const $route = $injector.get('$route');
      const globalState = $injector.get('globalState');
      const features = $injector.get('features');
@ -34,7 +34,9 @@ uiRoutes.when('/elasticsearch/indices', {
      let showSystemIndices = features.isEnabled('showSystemIndices', false);

      super({
-        title: 'Elasticsearch - Indices',
+        title: i18n('xpack.monitoring.elasticsearch.indices.routeTitle', {
+          defaultMessage: 'Elasticsearch - Indices'
+        }),
        storageKey: 'elasticsearch.indices',
        apiUrlFn: () => `../api/monitoring/v1/clusters/${clusterUuid}/elasticsearch/indices?show_system_indices=${showSystemIndices}`,
        reactNodeId: 'elasticsearchIndicesReact',
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/ml_jobs/index.html
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/ml_jobs/index.html
@ -1,7 +1,11 @@
 <monitoring-main product="elasticsearch" name="ml">
  <monitoring-cluster-status-elasticsearch status="mlJobs.data.clusterStatus"></monitoring-cluster-status-elasticsearch>
  <div class="page-row">
-    <h3 class="kuiScreenReaderOnly">Machine Learning Jobs</h3>
+    <h3
+      class="kuiScreenReaderOnly"
+      i18n-id="xpack.monitoring.elasticsearch.mlJobsTitle"
+      i18n-default-message="Machine Learning Jobs"
+    ></h3>
    <monitoring-ml-listing
      page-index="mlJobs.pageIndex"
      filter-text="mlJobs.filterText"
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/ml_jobs/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/ml_jobs/index.js
@ -23,9 +23,11 @@ uiRoutes.when('/elasticsearch/ml_jobs', {
  controllerAs: 'mlJobs',
  controller: class MlJobsList extends MonitoringViewBaseTableController {

-    constructor($injector, $scope) {
+    constructor($injector, $scope, i18n) {
      super({
-        title: 'Elasticsearch - Machine Learning Jobs',
+        title: i18n('xpack.monitoring.elasticsearch.mlJobs.routeTitle', {
+          defaultMessage: 'Elasticsearch - Machine Learning Jobs'
+        }),
        storageKey: 'elasticsearch.mlJobs',
        getPageData,
        $scope,
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/node/advanced/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/node/advanced/index.js
@ -46,7 +46,7 @@ uiRoutes.when('/elasticsearch/nodes/:node/advanced', {
    },
    pageData: getPageData
  },
-  controller($injector, $scope) {
+  controller($injector, $scope, i18n) {
    timefilter.enableTimeRangeSelector();
    timefilter.enableAutoRefreshSelector();

@ -56,7 +56,14 @@ uiRoutes.when('/elasticsearch/nodes/:node/advanced', {
    $scope.pageData = $route.current.locals.pageData;

    const title = $injector.get('title');
-    title($scope.cluster, `Elasticsearch - Nodes - ${$scope.pageData.nodeSummary.name} - Advanced`);
+    const routeTitle = i18n('xpack.monitoring.elasticsearch.node.advanced.routeTitle', {
+      defaultMessage: 'Elasticsearch - Nodes - {nodeSummaryName} - Advanced',
+      values: {
+        nodeSummaryName: $scope.pageData.nodeSummary.name
+      }
+    });
+
+    title($scope.cluster, routeTitle);

    const $executor = $injector.get('$executor');
    $executor.register({
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/node/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/node/index.js
@ -23,7 +23,7 @@ uiRoutes.when('/elasticsearch/nodes/:node', {
    },
    pageData: getPageData
  },
-  controller($injector, $scope) {
+  controller($injector, $scope, i18n) {
    timefilter.enableTimeRangeSelector();
    timefilter.enableAutoRefreshSelector();

@ -33,7 +33,14 @@ uiRoutes.when('/elasticsearch/nodes/:node', {
    $scope.pageData = $route.current.locals.pageData;

    const title = $injector.get('title');
-    title($scope.cluster, `Elasticsearch - Nodes - ${$scope.pageData.nodeSummary.name} - Overview`);
+    const routeTitle = i18n('xpack.monitoring.elasticsearch.node.overview.routeTitle', {
+      defaultMessage: 'Elasticsearch - Nodes - {nodeSummaryName} - Overview',
+      values: {
+        nodeSummaryName: $scope.pageData.nodeSummary.name
+      }
+    });
+
+    title($scope.cluster, routeTitle);

    const features = $injector.get('features');
    const callPageData = partial(getPageData, $injector);
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/nodes/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/nodes/index.js
@ -23,7 +23,7 @@ uiRoutes.when('/elasticsearch/nodes', {
  },
  controllerAs: 'elasticsearchNodes',
  controller: class ElasticsearchNodesController extends MonitoringViewBaseTableController {
-    constructor($injector, $scope) {
+    constructor($injector, $scope, i18n) {
      const $route = $injector.get('$route');
      const globalState = $injector.get('globalState');
      const showCgroupMetricsElasticsearch = $injector.get('showCgroupMetricsElasticsearch');
@ -33,7 +33,9 @@ uiRoutes.when('/elasticsearch/nodes', {
      });

      super({
-        title: 'Elasticsearch - Nodes',
+        title: i18n('xpack.monitoring.elasticsearch.nodes.routeTitle', {
+          defaultMessage: 'Elasticsearch - Nodes'
+        }),
        storageKey: 'elasticsearch.nodes',
        api: `../api/monitoring/v1/clusters/${globalState.cluster_uuid}/elasticsearch/nodes`,
        reactNodeId: 'elasticsearchNodesReact',
--- a/x-pack/plugins/monitoring/public/views/kibana/instance/index.js
+++ b/x-pack/plugins/monitoring/public/views/kibana/instance/index.js
@ -45,7 +45,7 @@ uiRoutes.when('/kibana/instances/:uuid', {
    },
    pageData: getPageData
  },
-  controller($injector, $scope) {
+  controller($injector, $scope, i18n) {
    timefilter.enableTimeRangeSelector();
    timefilter.enableAutoRefreshSelector();

@ -55,7 +55,14 @@ uiRoutes.when('/kibana/instances/:uuid', {
    $scope.pageData = $route.current.locals.pageData;

    const title = $injector.get('title');
-    title($scope.cluster, `Kibana - ${get($scope.pageData, 'kibanaSummary.name')}`);
+    const routeTitle = i18n('xpack.monitoring.kibana.instance.routeTitle', {
+      defaultMessage: 'Kibana - {kibanaSummaryName}',
+      values: {
+        kibanaSummaryName: get($scope.pageData, 'kibanaSummary.name')
+      }
+    });
+
+    title($scope.cluster, routeTitle);

    const $executor = $injector.get('$executor');
    $executor.register({
--- a/x-pack/plugins/monitoring/public/views/kibana/instances/index.html
+++ b/x-pack/plugins/monitoring/public/views/kibana/instances/index.html
@ -5,7 +5,10 @@
 >
  <monitoring-cluster-status-kibana status="kibanas.data.clusterStatus"></monitoring-cluster-status-kibana>
  <div class="page-row">
-    <h3 class="kuiScreenReaderOnly">Kibana Instances</h3>
+    <h3 class="kuiScreenReaderOnly"
+      i18n-id="xpack.monitoring.kibana.instancesTitle"
+      i18n-default-message="Kibana Instances"
+    ></h3>
    <monitoring-kibana-listing
      page-index="kibanas.pageIndex"
      filter-text="kibanas.filterText"
--- a/x-pack/plugins/monitoring/public/views/kibana/instances/index.js
+++ b/x-pack/plugins/monitoring/public/views/kibana/instances/index.js
@ -23,9 +23,11 @@ uiRoutes.when('/kibana/instances', {
  controllerAs: 'kibanas',
  controller: class KibanaInstancesList extends MonitoringViewBaseTableController {

-    constructor($injector, $scope) {
+    constructor($injector, $scope, i18n) {
      super({
-        title: 'Kibana Instances',
+        title: i18n('xpack.monitoring.kibana.instances.routeTitle', {
+          defaultMessage: 'Kibana Instances'
+        }),
        storageKey: 'kibana.instances',
        getPageData,
        $scope,
--- a/x-pack/plugins/monitoring/public/views/kibana/overview/index.js
+++ b/x-pack/plugins/monitoring/public/views/kibana/overview/index.js
@ -44,7 +44,7 @@ uiRoutes.when('/kibana', {
    },
    pageData: getPageData
  },
-  controller($injector, $scope) {
+  controller($injector, $scope, i18n) {
    timefilter.enableTimeRangeSelector();
    timefilter.enableAutoRefreshSelector();

@ -54,7 +54,11 @@ uiRoutes.when('/kibana', {
    $scope.pageData = $route.current.locals.pageData;

    const title = $injector.get('title');
-    title($scope.cluster, 'Kibana');
+    const routeTitle = i18n('xpack.monitoring.kibana.overview.routeTitle', {
+      defaultMessage: 'Kibana'
+    });
+
+    title($scope.cluster, routeTitle);

    const $executor = $injector.get('$executor');
    $executor.register({