[6.x] Feature/translate monitoring elasticsearch part 2 (#24734)

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)}

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);

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() {

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>

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

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';

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]
       );
     }

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"

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());

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
     }
   ]