From 00a01e70949789e26f65c8883dceb1ef57e669b0 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 13 Sep 2018 16:18:32 -0700
Subject: [PATCH] Localize JobDetails tabs. (#23020)

---
 .../job_details/tabs/tab_histogram.js         |  20 ++-
 .../components/job_details/tabs/tab_json.js   |  12 +-
 .../job_details/tabs/tab_metrics.js           |  12 +-
 .../job_details/tabs/tab_summary.js           | 143 ++++++++++++++----
 .../components/job_details/tabs/tab_terms.js  |  13 +-
 5 files changed, 164 insertions(+), 36 deletions(-)

diff --git a/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_histogram.js b/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_histogram.js
index b898a8af16cdc..72f681ced5dd5 100644
--- a/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_histogram.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_histogram.js
@@ -5,6 +5,7 @@
  */
 
 import React, { Fragment } from 'react';
+import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 
 import {
   EuiTitle,
@@ -14,7 +15,7 @@ import {
   EuiFlexItem,
 } from '@elastic/eui';
 
-export const TabHistogram = ({ histogram, histogramInterval }) => {
+export const TabHistogramUi = ({ histogram, histogramInterval }) => {
   // TODO: Render a table if there are more than 20 fields.
 
   const renderedTerms = histogram.map(({ name }) => {
@@ -30,13 +31,24 @@ export const TabHistogram = ({ histogram, histogramInterval }) => {
       <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           <EuiTitle size="s">
-            <h3>Histogram</h3>
+            <h3>
+              <FormattedMessage
+                id="xpack.rollupJobs.jobDetails.tabHistogram.sectionHistogram.title"
+                defaultMessage="Histogram"
+              />
+            </h3>
           </EuiTitle>
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
           <EuiText>
-            <p>Interval: {histogramInterval}</p>
+            <p>
+              <FormattedMessage
+                id="xpack.rollupJobs.jobDetails.tabHistogram.interval.label"
+                defaultMessage="Interval: {histogramInterval}"
+                values={{ histogramInterval }}
+              />
+            </p>
           </EuiText>
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -51,3 +63,5 @@ export const TabHistogram = ({ histogram, histogramInterval }) => {
     </Fragment>
   );
 };
+
+export const TabHistogram = injectI18n(TabHistogramUi);
diff --git a/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_json.js b/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_json.js
index 49608e9a8a3c9..cbaf4bf5d87fc 100644
--- a/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_json.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_json.js
@@ -5,6 +5,7 @@
  */
 
 import React, { Fragment } from 'react';
+import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 
 import {
   EuiTitle,
@@ -12,7 +13,7 @@ import {
   EuiCodeEditor,
 } from '@elastic/eui';
 
-export const TabJson = ({
+export const TabJsonUi = ({
   json,
 }) => {
   const jsonString = JSON.stringify(json, null, 2);
@@ -20,7 +21,12 @@ export const TabJson = ({
   return (
     <Fragment>
       <EuiTitle size="s">
-        <h3>JSON</h3>
+        <h3>
+          <FormattedMessage
+            id="xpack.rollupJobs.jobDetails.tabJson.sectionJson.title"
+            defaultMessage="JSON"
+          />
+        </h3>
       </EuiTitle>
 
       <EuiSpacer size="s" />
@@ -38,3 +44,5 @@ export const TabJson = ({
     </Fragment>
   );
 };
+
+export const TabJson = injectI18n(TabJsonUi);
diff --git a/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_metrics.js b/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_metrics.js
index e24c9113e7c29..19b8e7713fa93 100644
--- a/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_metrics.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_metrics.js
@@ -5,6 +5,7 @@
  */
 
 import React, { Fragment } from 'react';
+import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 
 import {
   EuiDescriptionList,
@@ -12,7 +13,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 
-export const TabMetrics = ({ metrics }) => {
+export const TabMetricsUi = ({ metrics }) => {
   // TODO: Render a table if there are more than 20 metrics.
   const listMetrics = metrics.map(({ name, types }) => {
     return {
@@ -24,7 +25,12 @@ export const TabMetrics = ({ metrics }) => {
   return (
     <Fragment>
       <EuiTitle size="s">
-        <h3>Metrics</h3>
+        <h3>
+          <FormattedMessage
+            id="xpack.rollupJobs.jobDetails.tabMetrics.sectionMetrics.title"
+            defaultMessage="Metrics"
+          />
+        </h3>
       </EuiTitle>
 
       <EuiSpacer size="s" />
@@ -33,3 +39,5 @@ export const TabMetrics = ({ metrics }) => {
     </Fragment>
   );
 };
+
+export const TabMetrics = injectI18n(TabMetricsUi);
diff --git a/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_summary.js b/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_summary.js
index aa67ed439e5a7..797bcfffac650 100644
--- a/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_summary.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_summary.js
@@ -6,6 +6,7 @@
 
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 
 import {
   EuiDescriptionList,
@@ -18,7 +19,7 @@ import {
 
 import { JobStatus } from '../../job_status';
 
-export class TabSummary extends Component {
+export class TabSummaryUi extends Component {
   static propTypes = {
     job: PropTypes.object.isRequired,
     stats: PropTypes.object,
@@ -44,24 +45,37 @@ export class TabSummary extends Component {
         <EuiSpacer size="s" />
 
         <EuiTitle size="s">
-          <h3>Stats</h3>
+          <h3>
+            <FormattedMessage
+              id="xpack.rollupJobs.jobDetails.tabSummary.sectionStats.title"
+              defaultMessage="Stats"
+            />
+          </h3>
         </EuiTitle>
 
         <EuiSpacer size="s" />
 
         <EuiDescriptionList type="column" align="center">
-          <Fragment>
-            <EuiDescriptionListTitle>
-              <strong>Status</strong>
-            </EuiDescriptionListTitle>
+          <EuiDescriptionListTitle>
+            <strong>
+              <FormattedMessage
+                id="xpack.rollupJobs.jobDetails.tabSummary.itemStatus.label"
+                defaultMessage="Status"
+              />
+            </strong>
+          </EuiDescriptionListTitle>
 
-            <EuiDescriptionListDescription>
-              <JobStatus status={status} />
-            </EuiDescriptionListDescription>
-          </Fragment>
+          <EuiDescriptionListDescription>
+            <JobStatus status={status} />
+          </EuiDescriptionListDescription>
 
           <EuiDescriptionListTitle>
-            <strong>Documents processed</strong>
+            <strong>
+              <FormattedMessage
+                id="xpack.rollupJobs.jobDetails.tabSummary.itemDocumentsProcessed.label"
+                defaultMessage="Documents processed"
+              />
+            </strong>
           </EuiDescriptionListTitle>
 
           <EuiDescriptionListDescription>
@@ -69,7 +83,12 @@ export class TabSummary extends Component {
           </EuiDescriptionListDescription>
 
           <EuiDescriptionListTitle>
-            <strong>Pages processed</strong>
+            <strong>
+              <FormattedMessage
+                id="xpack.rollupJobs.jobDetails.tabSummary.itemPagesProcessed.label"
+                defaultMessage="Pages processed"
+              />
+            </strong>
           </EuiDescriptionListTitle>
 
           <EuiDescriptionListDescription>
@@ -77,7 +96,12 @@ export class TabSummary extends Component {
           </EuiDescriptionListDescription>
 
           <EuiDescriptionListTitle>
-            <strong>Rollups indexed</strong>
+            <strong>
+              <FormattedMessage
+                id="xpack.rollupJobs.jobDetails.tabSummary.itemRollupsIndexed.label"
+                defaultMessage="Rollups indexed"
+              />
+            </strong>
           </EuiDescriptionListTitle>
 
           <EuiDescriptionListDescription>
@@ -85,7 +109,12 @@ export class TabSummary extends Component {
           </EuiDescriptionListDescription>
 
           <EuiDescriptionListTitle>
-            <strong>Trigger count</strong>
+            <strong>
+              <FormattedMessage
+                id="xpack.rollupJobs.jobDetails.tabSummary.itemTriggerCount.label"
+                defaultMessage="Trigger count"
+              />
+            </strong>
           </EuiDescriptionListTitle>
 
           <EuiDescriptionListDescription>
@@ -112,14 +141,24 @@ export class TabSummary extends Component {
     return (
       <Fragment>
         <EuiTitle size="s">
-          <h3>Logistics</h3>
+          <h3>
+            <FormattedMessage
+              id="xpack.rollupJobs.jobDetails.tabSummary.sectionLogistics.label"
+              defaultMessage="Logistics"
+            />
+          </h3>
         </EuiTitle>
 
         <EuiSpacer size="s" />
 
         <EuiDescriptionList type="column" align="center">
           <EuiDescriptionListTitle>
-            <strong>Index pattern</strong>
+            <strong>
+              <FormattedMessage
+                id="xpack.rollupJobs.jobDetails.tabSummary.itemIndexPattern.label"
+                defaultMessage="Index pattern"
+              />
+            </strong>
           </EuiDescriptionListTitle>
 
           <EuiDescriptionListDescription className="eui-textBreakWord">
@@ -127,7 +166,12 @@ export class TabSummary extends Component {
           </EuiDescriptionListDescription>
 
           <EuiDescriptionListTitle>
-            <strong>Rollup index</strong>
+            <strong>
+              <FormattedMessage
+                id="xpack.rollupJobs.jobDetails.tabSummary.itemRollupIndex.label"
+                defaultMessage="Rollup index"
+              />
+            </strong>
           </EuiDescriptionListTitle>
 
           <EuiDescriptionListDescription className="eui-textBreakWord">
@@ -135,9 +179,19 @@ export class TabSummary extends Component {
           </EuiDescriptionListDescription>
 
           <EuiDescriptionListTitle>
-            <strong>Cron</strong>{' '}
+            <strong>
+              <FormattedMessage
+                id="xpack.rollupJobs.jobDetails.tabSummary.itemCron.label"
+                defaultMessage="Cron"
+              />
+            </strong>{' '}
             <EuiIconTip
-              content="Interval at which data is rolled up"
+              content={(
+                <FormattedMessage
+                  id="xpack.rollupJobs.jobDetails.tabSummary.itemCron.tip"
+                  defaultMessage="Interval at which data is rolled up"
+                />
+              )}
             />
           </EuiDescriptionListTitle>
 
@@ -149,14 +203,24 @@ export class TabSummary extends Component {
         <EuiSpacer size="s" />
 
         <EuiTitle size="s">
-          <h3>Date histogram</h3>
+          <h3>
+            <FormattedMessage
+              id="xpack.rollupJobs.jobDetails.tabSummary.sectionDateHistogram.label"
+              defaultMessage="Date histogram"
+            />
+          </h3>
         </EuiTitle>
 
         <EuiSpacer size="s" />
 
         <EuiDescriptionList type="column" align="center">
           <EuiDescriptionListTitle>
-            <strong>Time field</strong>
+            <strong>
+              <FormattedMessage
+                id="xpack.rollupJobs.jobDetails.tabSummary.itemTimeField.label"
+                defaultMessage="Time field"
+              />
+            </strong>
           </EuiDescriptionListTitle>
 
           <EuiDescriptionListDescription className="eui-textBreakWord">
@@ -164,7 +228,12 @@ export class TabSummary extends Component {
           </EuiDescriptionListDescription>
 
           <EuiDescriptionListTitle>
-            <strong>Timezone</strong>
+            <strong>
+              <FormattedMessage
+                id="xpack.rollupJobs.jobDetails.tabSummary.itemTimezone.label"
+                defaultMessage="Timezone"
+              />
+            </strong>
           </EuiDescriptionListTitle>
 
           <EuiDescriptionListDescription>
@@ -172,17 +241,37 @@ export class TabSummary extends Component {
           </EuiDescriptionListDescription>
 
           <EuiDescriptionListTitle>
-            <strong>Delay</strong>
+            <strong>
+              <FormattedMessage
+                id="xpack.rollupJobs.jobDetails.tabSummary.itemDelay.label"
+                defaultMessage="Delay"
+              />
+            </strong>
           </EuiDescriptionListTitle>
 
           <EuiDescriptionListDescription>
-            {dateHistogramDelay || 'None'}
+            {dateHistogramDelay || (
+              <FormattedMessage
+                id="xpack.rollupJobs.jobDetails.tabSummary.itemDelay.none"
+                defaultMessage="None"
+              />
+            )}
           </EuiDescriptionListDescription>
 
           <EuiDescriptionListTitle>
-            <strong>Interval</strong>{' '}
+            <strong>
+              <FormattedMessage
+                id="xpack.rollupJobs.jobDetails.tabSummary.itemInterval.label"
+                defaultMessage="Interval"
+              />
+            </strong>{' '}
             <EuiIconTip
-              content="Time bucket interval generated at roll-up time"
+              content={(
+                <FormattedMessage
+                  id="xpack.rollupJobs.jobDetails.tabSummary.itemInterval.tip"
+                  defaultMessage="Time bucket interval generated at roll-up time"
+                />
+              )}
             />
           </EuiDescriptionListTitle>
 
@@ -196,3 +285,5 @@ export class TabSummary extends Component {
     );
   }
 }
+
+export const TabSummary = injectI18n(TabSummaryUi);
diff --git a/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_terms.js b/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_terms.js
index 0695a66b423ce..b5042d65c5fc3 100644
--- a/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_terms.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_terms.js
@@ -5,6 +5,7 @@
  */
 
 import React, { Fragment } from 'react';
+import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 
 import {
   EuiTitle,
@@ -12,9 +13,8 @@ import {
   EuiText,
 } from '@elastic/eui';
 
-export const TabTerms = ({ terms }) => {
+export const TabTermsUi = ({ terms }) => {
   // TODO: Render a table if there are more than 20 fields.
-
   const renderedTerms = terms.map(({ name }) => {
     return (
       <li key={name}>
@@ -26,7 +26,12 @@ export const TabTerms = ({ terms }) => {
   return (
     <Fragment>
       <EuiTitle size="s">
-        <h3>Terms</h3>
+        <h3>
+          <FormattedMessage
+            id="xpack.rollupJobs.jobDetails.tabTerms.sectionTerms.title"
+            defaultMessage="Terms"
+          />
+        </h3>
       </EuiTitle>
 
       <EuiSpacer size="s" />
@@ -39,3 +44,5 @@ export const TabTerms = ({ terms }) => {
     </Fragment>
   );
 };
+
+export const TabTerms = injectI18n(TabTermsUi);