Feature/translate monitoring table

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

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 }

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

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;

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

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

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

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

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