[Rollups] Fix i18n bugs (#23848)

* Internationalize job details tabs and wrap instances in EuiErrorBoundary to visually localize the error. * Localize no default index pattern message. * Localize es interval errors. * Localize job action menu and confirm delete modal. * Remove unnecessary use of injectI18n from tabs. * Localize job status. * Localize steps. * Remove template literals from FormattedMessages.
2025-04-23 09:19:04 -04:00 · 2018-10-30 14:13:08 -07:00 · 2018-10-30 14:13:08 -07:00 · 05bf7cd4d4
commit 05bf7cd4d4
parent 2e450896c3
25 changed files with 252 additions and 166 deletions
--- a/.i18nrc.json
+++ b/.i18nrc.json
@ -13,6 +13,7 @@
    "tagCloud": "src/core_plugins/tagcloud",
    "xpack.idxMgmt": "x-pack/plugins/index_management",
    "xpack.watcher": "x-pack/plugins/watcher",
+    "xpack.rollupJobs": "x-pack/plugins/rollup",
    "xpack.security": "x-pack/plugins/security"
  },
  "exclude": [
--- a/src/core_plugins/kibana/public/management/sections/indices/index.js
+++ b/src/core_plugins/kibana/public/management/sections/indices/index.js
@ -28,6 +28,7 @@ import indexTemplate from './index.html';
 import { SavedObjectsClientProvider } from 'ui/saved_objects';
 import { FeatureCatalogueRegistryProvider, FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
 import { i18n } from '@kbn/i18n';
+import { I18nProvider } from '@kbn/i18n/react';

 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
@ -47,11 +48,13 @@ export function updateIndexPatternList(
  }

  render(
-    <IndexPatternList
-      indexPatternCreationOptions={indexPatternCreationOptions}
-      defaultIndex={defaultIndex}
-      indexPatterns={indexPatterns}
-    />,
+    <I18nProvider>
+      <IndexPatternList
+        indexPatternCreationOptions={indexPatternCreationOptions}
+        defaultIndex={defaultIndex}
+        indexPatterns={indexPatterns}
+      />
+    </I18nProvider>,
    node,
  );
 }
--- a/src/core_plugins/kibana/public/management/sections/indices/index_pattern_list/components/list/list.js
+++ b/src/core_plugins/kibana/public/management/sections/indices/index_pattern_list/components/list/list.js
@ -19,6 +19,7 @@

 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { injectI18n, FormattedMessage } from '@kbn/i18n/react';

 import {
  EuiButtonEmpty,
@ -27,35 +28,77 @@ import {
  EuiSpacer,
 } from '@elastic/eui';

-export class List extends Component {
+class ListUi extends Component {
  static propTypes = {
    indexPatterns: PropTypes.array,
    defaultIndex: PropTypes.string,
  }

  renderList() {
-    const { indexPatterns } = this.props;
-    return indexPatterns && indexPatterns.length ? (
-      <div>
-        {
-          indexPatterns.map(pattern => {
-            return (
-              <div key={pattern.id} >
-                <EuiButtonEmpty size="xs" href={pattern.url} data-test-subj="indexPatternLink">
-                  {pattern.default ? <Fragment><i aria-label="Default index pattern" className="fa fa-star" /> </Fragment> : ''}
-                  {pattern.active ? <strong>{pattern.title}</strong> : pattern.title} {pattern.tag ? (
-                    <Fragment key={pattern.tag.key}>
-                      {<EuiBadge color={pattern.tag.color || 'primary'}>{pattern.tag.name}</EuiBadge> }
-                    </Fragment>
-                  ) : null}
-                </EuiButtonEmpty>
-                <EuiSpacer size="xs"/>
-              </div>
-            );
-          })
-        }
-      </div>
-    ) : null;
+    const { indexPatterns, intl } = this.props;
+
+    if (indexPatterns && indexPatterns.length) {
+      return (
+        <div>
+          {
+            indexPatterns.map(pattern => {
+              const { id, default: isDefault, active, url, title, tag } = pattern;
+
+              let icon;
+
+              if (isDefault) {
+                icon = (
+                  <Fragment>
+                    <em
+                      aria-label={intl.formatMessage({
+                        id: 'kbn.management.indexPatternList.defaultIndexPatternIconAriaLabel',
+                        defaultMessage: 'Default index pattern',
+                      })}
+                      className="fa fa-star"
+                    />
+                    {' '}
+                  </Fragment>
+                );
+              }
+
+              let titleElement;
+
+              if (active) {
+                titleElement = <strong>{title}</strong>;
+              } else {
+                titleElement = title;
+              }
+
+              let tagElement;
+
+              if (tag) {
+                const { key, color, name } = tag;
+
+                tagElement = (
+                  <Fragment key={key}>
+                    {' '}
+                    <EuiBadge color={color || 'primary'}>{name}</EuiBadge>
+                  </Fragment>
+                );
+              }
+
+              return (
+                <div key={id}>
+                  <EuiButtonEmpty size="xs" href={url} data-test-subj="indexPatternLink">
+                    {icon}
+                    {titleElement}
+                    {tagElement}
+                  </EuiButtonEmpty>
+                  <EuiSpacer size="xs"/>
+                </div>
+              );
+            })
+          }
+        </div>
+      );
+    }
+
+    return null;
  }

  renderNoDefaultMessage() {
@ -66,7 +109,12 @@ export class List extends Component {
          color="warning"
          size="s"
          iconType="alert"
-          title="No default index pattern. You must select or create one to continue."
+          title={(
+            <FormattedMessage
+              id="kbn.management.indexPatternList.noDefaultIndexPatternTitle"
+              defaultMessage="No default index pattern. You must select or create one to continue."
+            />
+          )}
        />
      </div>
    ) : null;
@ -81,3 +129,5 @@ export class List extends Component {
    );
  }
 }
+
+export const List = injectI18n(ListUi);
--- a/src/ui/public/management/index_pattern_creation/index_pattern_creation_config.js
+++ b/src/ui/public/management/index_pattern_creation/index_pattern_creation_config.js
@ -16,6 +16,7 @@
 * specific language governing permissions and limitations
 * under the License.
 */
+
 import { i18n } from '@kbn/i18n';

 const indexPatternTypeName = i18n.translate('common.ui.management.editIndexPattern.createIndex.defaultTypeName',
--- a/src/ui/public/utils/parse_es_interval/invalid_es_calendar_interval_error.ts
+++ b/src/ui/public/utils/parse_es_interval/invalid_es_calendar_interval_error.ts
@ -18,6 +18,7 @@
 */

 import { Unit } from '@kbn/datemath';
+import { i18n } from '@kbn/i18n';

 export class InvalidEsCalendarIntervalError extends Error {
  constructor(
@ -26,7 +27,12 @@ export class InvalidEsCalendarIntervalError extends Error {
    public readonly unit: Unit,
    public readonly type: string
  ) {
-    super(`Invalid calendar interval: ${interval}, value must be 1`);
+    super(
+      i18n.translate('common.ui.parseEsInterval.invalidEsCalendarIntervalErrorMessage', {
+        defaultMessage: 'Invalid calendar interval: {interval}, value must be 1',
+        values: { interval },
+      })
+    );

    this.name = 'InvalidEsCalendarIntervalError';
    this.value = value;
--- a/src/ui/public/utils/parse_es_interval/invalid_es_interval_format_error.ts
+++ b/src/ui/public/utils/parse_es_interval/invalid_es_interval_format_error.ts
@ -17,9 +17,17 @@
 * under the License.
 */

+import { i18n } from '@kbn/i18n';
+
 export class InvalidEsIntervalFormatError extends Error {
  constructor(public readonly interval: string) {
-    super(`Invalid interval format: ${interval}`);
+    super(
+      i18n.translate('common.ui.parseEsInterval.invalidEsIntervalFormatErrorMessage', {
+        defaultMessage: 'Invalid interval format: {interval}',
+        values: { interval },
+      })
+    );
+
    this.name = 'InvalidEsIntervalFormatError';

    // captureStackTrace is only available in the V8 engine, so any browser using
--- a/x-pack/plugins/rollup/public/crud_app/sections/components/index.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/components/index.js
@ -15,6 +15,7 @@ export {
  JOB_DETAILS_TAB_HISTOGRAM,
  JOB_DETAILS_TAB_METRICS,
  JOB_DETAILS_TAB_JSON,
+  tabToHumanizedMap,
 } from './job_details';

 export { JobStatus } from './job_status';
--- a/x-pack/plugins/rollup/public/crud_app/sections/components/job_action_menu/confirm_delete_modal/confirm_delete_modal.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/components/job_action_menu/confirm_delete_modal/confirm_delete_modal.js
@ -16,7 +16,6 @@ import {
 class ConfirmDeleteModalUi extends Component {
  static propTypes = {
    isSingleSelection: PropTypes.bool.isRequired,
-    entity: PropTypes.string.isRequired,
    jobs: PropTypes.array.isRequired,
    onCancel: PropTypes.func.isRequired,
    onConfirm: PropTypes.func.isRequired,
@ -39,7 +38,6 @@ class ConfirmDeleteModalUi extends Component {
  render() {
    const {
      isSingleSelection,
-      entity,
      jobs,
      onCancel,
      onConfirm,
@ -52,7 +50,7 @@ class ConfirmDeleteModalUi extends Component {
    if (isSingleSelection) {
      const { id, status } = jobs[0];
      title = intl.formatMessage({
-        id: 'xpack.rollupJobs.jobActionMenu.deleteJob.confirmModal.modalTitleSingle',
+        id: 'xpack.rollupJobs.jobActionMenu.deleteJob.confirmModal.deleteSingleJobTitle',
        defaultMessage: 'Delete rollup job \'{id}\'?',
      }, { id });

@ -60,7 +58,7 @@ class ConfirmDeleteModalUi extends Component {
        content = (
          <p>
            <FormattedMessage
-              id="xpack.rollupJobs.jobActionMenu.deleteJob.deleteDescriptionSingleRunning"
+              id="xpack.rollupJobs.jobActionMenu.deleteJob.confirmModal.deleteSingleJobDescription"
              defaultMessage="This job has been started."
            />
          </p>
@ -68,7 +66,7 @@ class ConfirmDeleteModalUi extends Component {
      }
    } else {
      title = intl.formatMessage({
-        id: 'xpack.rollupJobs.jobActionMenu.deleteJob.confirmModal.modalTitleMultiple',
+        id: 'xpack.rollupJobs.jobActionMenu.deleteJob.confirmModal.multipleDeletionTitle',
        defaultMessage: 'Delete {count} rollup jobs?',
      }, { count: jobs.length });

@ -76,12 +74,10 @@ class ConfirmDeleteModalUi extends Component {
        <Fragment>
          <p>
            <FormattedMessage
-              id="xpack.rollupJobs.jobActionMenu.deleteJob.deleteDescriptionMultiple"
-              defaultMessage="You are about to delete {mergedKeyword}"
-              values={{ mergedKeyword: isSingleSelection ? 'this' : 'these' }}
+              id="xpack.rollupJobs.jobActionMenu.deleteJob.confirmModal.multipleDeletionDescription"
+              defaultMessage="You are about to delete {isSingleSelection, plural, one {this job} other {these jobs}}"
+              values={{ isSingleSelection: isSingleSelection ? 1 : 0 }}
            />
-            {' '}
-            {entity}:
          </p>
          {this.renderJobs()}
        </Fragment>
--- a/x-pack/plugins/rollup/public/crud_app/sections/components/job_action_menu/job_action_menu.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/components/job_action_menu/job_action_menu.js
@ -53,8 +53,7 @@ class JobActionMenuUi extends Component {
      intl,
    } = this.props;

-    const isSingleSelection = this.isSingleSelection();
-    const entity = this.getEntity(isSingleSelection);
+    const isSingleSelection = this.isSingleSelection() ? 1 : 0;

    const items = [];

@ -62,8 +61,10 @@ class JobActionMenuUi extends Component {
      items.push({
        name: intl.formatMessage({
          id: 'xpack.rollupJobs.jobActionMenu.startJobLabel',
-          defaultMessage: 'Start {entity}',
-        }, { entity }),
+          defaultMessage: 'Start {isSingleSelection, plural, one {job} other {jobs}}',
+        }, {
+          isSingleSelection,
+        }),
        icon: <EuiIcon type="play" />,
        onClick: () => {
          this.closePopover();
@ -76,8 +77,10 @@ class JobActionMenuUi extends Component {
      items.push({
        name: intl.formatMessage({
          id: 'xpack.rollupJobs.jobActionMenu.stopJobLabel',
-          defaultMessage: 'Stop {entity}',
-        }, { entity }),
+          defaultMessage: 'Stop {isSingleSelection, plural, one {job} other {jobs}}',
+        }, {
+          isSingleSelection,
+        }),
        icon: <EuiIcon type="stop" />,
        onClick: () => {
          this.closePopover();
@ -89,8 +92,10 @@ class JobActionMenuUi extends Component {
    items.push({
      name: intl.formatMessage({
        id: 'xpack.rollupJobs.jobActionMenu.deleteJobLabel',
-        defaultMessage: 'Delete {entity}',
-      }, { entity }),
+        defaultMessage: 'Delete {isSingleSelection, plural, one {job} other {jobs}}',
+      }, {
+        isSingleSelection,
+      }),
      icon: <EuiIcon type="trash" />,
      onClick: () => {
        this.closePopover();
@ -98,13 +103,12 @@ class JobActionMenuUi extends Component {
      },
    });

-    const upperCasedEntity = `${entity[0].toUpperCase()}${entity.slice(1)}`;
    const panelTree = {
      id: 0,
      title: intl.formatMessage({
        id: 'xpack.rollupJobs.jobActionMenu.panelTitle',
-        defaultMessage: '{upperCasedEntity} options',
-      }, { upperCasedEntity }),
+        defaultMessage: 'Job options',
+      }),
      items,
    };

@ -159,12 +163,10 @@ class JobActionMenuUi extends Component {
    };

    const isSingleSelection = this.isSingleSelection();
-    const entity = this.getEntity(isSingleSelection);

    return (
      <ConfirmDeleteModal
        isSingleSelection={isSingleSelection}
-        entity={entity}
        jobs={jobs}
        onConfirm={onConfirmDelete}
        onCancel={this.closeDeleteConfirmationModal}
@ -176,10 +178,6 @@ class JobActionMenuUi extends Component {
    return this.props.jobs.length === 1;
  };

-  getEntity = isSingleSelection => {
-    return isSingleSelection ? 'job' : 'jobs';
-  };
-
  render() {
    const { intl } = this.props;
    const jobCount = this.props.jobs.length;
@ -195,12 +193,12 @@ class JobActionMenuUi extends Component {
    } = this.props;

    const panels = this.panels();
-    const isSingleSelection = this.isSingleSelection();
-    const entity = this.getEntity(isSingleSelection);
+
    const actionsAriaLabel = intl.formatMessage({
      id: 'xpack.rollupJobs.jobActionMenu.jobActionMenuButtonAriaLabel',
-      defaultMessage: '{entity} options',
-    }, { entity });
+      defaultMessage: 'Job options',
+    });
+
    const button = (
      <EuiButton
        data-test-subj="jobActionMenuButton"
@ -218,7 +216,6 @@ class JobActionMenuUi extends Component {
      <div>
        {this.confirmDeleteModal()}
        <EuiPopover
-          id={`actionMenu${entity}`}
          button={button}
          isOpen={this.state.isPopoverOpen}
          closePopover={this.closePopover}
--- a/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/index.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/index.js
@ -11,4 +11,5 @@ export {
  JOB_DETAILS_TAB_HISTOGRAM,
  JOB_DETAILS_TAB_METRICS,
  JOB_DETAILS_TAB_JSON,
+  tabToHumanizedMap,
 } from './job_details';
--- a/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/job_details.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/components/job_details/job_details.js
@ -6,6 +6,7 @@

 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from '@kbn/i18n/react';

 import {
  TabSummary,
@ -15,11 +16,44 @@ import {
  TabHistogram,
 } from './tabs';

-export const JOB_DETAILS_TAB_SUMMARY = 'Summary';
-export const JOB_DETAILS_TAB_TERMS = 'Terms';
-export const JOB_DETAILS_TAB_HISTOGRAM = 'Histogram';
-export const JOB_DETAILS_TAB_METRICS = 'Metrics';
-export const JOB_DETAILS_TAB_JSON = 'JSON';
+export const JOB_DETAILS_TAB_SUMMARY = 'JOB_DETAILS_TAB_SUMMARY';
+export const JOB_DETAILS_TAB_TERMS = 'JOB_DETAILS_TAB_TERMS';
+export const JOB_DETAILS_TAB_HISTOGRAM = 'JOB_DETAILS_TAB_HISTOGRAM';
+export const JOB_DETAILS_TAB_METRICS = 'JOB_DETAILS_TAB_METRICS';
+export const JOB_DETAILS_TAB_JSON = 'JOB_DETAILS_TAB_JSON';
+
+export const tabToHumanizedMap = {
+  [JOB_DETAILS_TAB_SUMMARY]: (
+    <FormattedMessage
+      id="xpack.rollupJobs.create.jobDetails.tabSummaryLabel"
+      defaultMessage="Summary"
+    />
+  ),
+  [JOB_DETAILS_TAB_TERMS]: (
+    <FormattedMessage
+      id="xpack.rollupJobs.create.jobDetails.tabTermsLabel"
+      defaultMessage="Terms"
+    />
+  ),
+  [JOB_DETAILS_TAB_HISTOGRAM]: (
+    <FormattedMessage
+      id="xpack.rollupJobs.create.jobDetails.tabHistogramLabel"
+      defaultMessage="Histogram"
+    />
+  ),
+  [JOB_DETAILS_TAB_METRICS]: (
+    <FormattedMessage
+      id="xpack.rollupJobs.create.jobDetails.tabMetricsLabel"
+      defaultMessage="Metrics"
+    />
+  ),
+  [JOB_DETAILS_TAB_JSON]: (
+    <FormattedMessage
+      id="xpack.rollupJobs.create.jobDetails.tabJsonLabel"
+      defaultMessage="JSON"
+    />
+  ),
+};

 const JOB_DETAILS_TABS = [
  JOB_DETAILS_TAB_SUMMARY,
@ -43,22 +77,22 @@ export const JobDetails = ({
  } = job;

  const tabToContentMap = {
-    Summary: (
+    [JOB_DETAILS_TAB_SUMMARY]: (
      <TabSummary
        job={job}
        stats={stats}
      />
    ),
-    Terms: (
+    [JOB_DETAILS_TAB_TERMS]: (
      <TabTerms terms={terms} />
    ),
-    Histogram: (
+    [JOB_DETAILS_TAB_HISTOGRAM]: (
      <TabHistogram histogram={histogram} histogramInterval={histogramInterval} />
    ),
-    Metrics: (
+    [JOB_DETAILS_TAB_METRICS]: (
      <TabMetrics metrics={metrics} />
    ),
-    JSON: (
+    [JOB_DETAILS_TAB_JSON]: (
      <TabJson json={json} />
    ),
  };
--- 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,7 +5,7 @@
 */

 import React, { Fragment } from 'react';
-import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';

 import {
@ -25,7 +25,7 @@ const columns = [{
  sortable: true,
 }];

-export const TabHistogramUi = ({ histogram, histogramInterval }) => (
+export const TabHistogram = ({ histogram, histogramInterval }) => (
  <Fragment>
    <EuiDescriptionList textStyle="reverse">
      <EuiDescriptionListTitle>
@ -48,5 +48,3 @@ export const TabHistogramUi = ({ histogram, histogramInterval }) => (
    />
  </Fragment>
 );
-
-export const TabHistogram = injectI18n(TabHistogramUi);
--- 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,7 +6,7 @@

 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';

 import {
  EuiDescriptionList,
@ -21,7 +21,7 @@ import {

 import { JobStatus } from '../../job_status';

-export class TabSummaryUi extends Component {
+export class TabSummary extends Component {
  static propTypes = {
    job: PropTypes.object.isRequired,
    stats: PropTypes.object,
@ -292,5 +292,3 @@ export class TabSummaryUi extends Component {
    );
  }
 }
-
-export const TabSummary = injectI18n(TabSummaryUi);
--- 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,7 +5,6 @@
 */

 import React from 'react';
-import { injectI18n } from '@kbn/i18n/react';

 import { FieldList } from '../../field_list';

@ -16,11 +15,9 @@ const columns = [{
  sortable: true,
 }];

-export const TabTermsUi = ({ terms }) => (
+export const TabTerms = ({ terms }) => (
  <FieldList
    columns={columns}
    fields={terms}
  />
 );
-
-export const TabTerms = injectI18n(TabTermsUi);
--- a/x-pack/plugins/rollup/public/crud_app/sections/components/job_status/job_status.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/components/job_status/job_status.js
@ -5,6 +5,7 @@
 */

 import React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';

 import {
  EuiHealth,
@ -13,22 +14,34 @@ import {
 const statusToHealthMap = {
  stopped: (
    <EuiHealth color="subdued">
-      Stopped
+      <FormattedMessage
+        id="xpack.rollupJobs.jobStatus.stoppedLabel"
+        defaultMessage="Stopped"
+      />
    </EuiHealth>
  ),
  started: (
    <EuiHealth color="success">
-      Started
+      <FormattedMessage
+        id="xpack.rollupJobs.jobStatus.startedLabel"
+        defaultMessage="Started"
+      />
    </EuiHealth>
  ),
  indexing: (
    <EuiHealth color="warning">
-      Indexing
+      <FormattedMessage
+        id="xpack.rollupJobs.jobStatus.indexingLabel"
+        defaultMessage="Indexing"
+      />
    </EuiHealth>
  ),
  abort: (
    <EuiHealth color="danger">
-      Aborting
+      <FormattedMessage
+        id="xpack.rollupJobs.jobStatus.abortingLabel"
+        defaultMessage="Aborting"
+      />
    </EuiHealth>
  ),
 };
--- a/x-pack/plugins/rollup/public/crud_app/sections/job_create/job_create.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/job_create/job_create.js
@ -56,22 +56,22 @@ import {
 } from './steps_config';

 const stepIdToTitleMap = {
-  [STEP_LOGISTICS]: i18n.translate('xpack.rollupJobs.create.stepLogisticsTitle', {
+  [STEP_LOGISTICS]: i18n.translate('xpack.rollupJobs.create.steps.stepLogisticsTitle', {
    defaultMessage: 'Logistics',
  }),
-  [STEP_DATE_HISTOGRAM]: i18n.translate('xpack.rollupJobs.create.stepDateHistogramTitle', {
+  [STEP_DATE_HISTOGRAM]: i18n.translate('xpack.rollupJobs.create.steps.stepDateHistogramTitle', {
    defaultMessage: 'Date histogram',
  }),
-  [STEP_TERMS]: i18n.translate('xpack.rollupJobs.create.stepTermsTitle', {
+  [STEP_TERMS]: i18n.translate('xpack.rollupJobs.create.steps.stepTermsTitle', {
    defaultMessage: 'Terms',
  }),
-  [STEP_HISTOGRAM]: i18n.translate('xpack.rollupJobs.create.stepHistogramTitle', {
+  [STEP_HISTOGRAM]: i18n.translate('xpack.rollupJobs.create.steps.stepHistogramTitle', {
    defaultMessage: 'Histogram',
  }),
-  [STEP_METRICS]: i18n.translate('xpack.rollupJobs.create.stepMetricsTitle', {
+  [STEP_METRICS]: i18n.translate('xpack.rollupJobs.create.steps.stepMetricsTitle', {
    defaultMessage: 'Metrics',
  }),
-  [STEP_REVIEW]: i18n.translate('xpack.rollupJobs.create.stepReviewTitle', {
+  [STEP_REVIEW]: i18n.translate('xpack.rollupJobs.create.steps.stepReviewTitle', {
    defaultMessage: 'Review and save',
  }),
 };
@ -416,7 +416,7 @@ export class JobCreateUi extends Component {
    const breadcrumbs = [{
      text: (
        <FormattedMessage
-          id="xpack.rollupJobs.create.breadcrumbs.jobs"
+          id="xpack.rollupJobs.create.breadcrumbs.jobsText"
          defaultMessage="Rollup jobs"
        />
      ),
@ -424,7 +424,7 @@ export class JobCreateUi extends Component {
    }, {
      text: (
        <FormattedMessage
-          id="xpack.rollupJobs.create.breadcrumbs.create"
+          id="xpack.rollupJobs.create.breadcrumbs.createText"
          defaultMessage="Create"
        />
      ),
--- a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_date_histogram.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_date_histogram.js
@ -235,7 +235,7 @@ export class StepDateHistogramUi extends Component {
                      link: (
                        <EuiLink href={dateHistogramAggregationUrl} target="_blank">
                          <FormattedMessage
-                            id="xpack.rollupJobs.create.stepDateHistogram.descriptio"
+                            id="xpack.rollupJobs.create.stepDateHistogramDescription.aggregationsLinkLabel"
                            defaultMessage="date histogram aggregations"
                          />
                        </EuiLink>
@ -247,9 +247,7 @@ export class StepDateHistogramUi extends Component {
                <p>
                  <FormattedMessage
                    id="xpack.rollupJobs.create.stepDateHistogram.sectionDataSourceDescription"
-                    defaultMessage={`
-                      Note that smaller time buckets take up proportionally more space.
-                    `}
+                    defaultMessage="Note that smaller time buckets take up proportionally more space."
                  />
                </p>
              </Fragment>
--- a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_histogram.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_histogram.js
@ -96,10 +96,8 @@ export class StepHistogramUi extends Component {
            <EuiText>
              <p>
                <FormattedMessage
-                  id="xpack.rollupJobs.create.stepHistogramDescription"
-                  defaultMessage={`
-                    Select the fields you want to bucket using numeric intervals.
-                  `}
+                  id="xpack.rollupJobs.create.stepHistogram.histogramDescription"
+                  defaultMessage="Select the fields you want to bucket using numeric intervals."
                />
              </p>
            </EuiText>
@ -190,12 +188,10 @@ export class StepHistogramUi extends Component {
          description={(
            <FormattedMessage
              id="xpack.rollupJobs.create.stepHistogram.sectionHistogramIntervalDescription"
-              defaultMessage={`
-                This is the interval of histogram buckets to be generated when rolling up, e.g. 5
-                will create buckets that are five units wide (0-5, 5-10, etc). Note that only one
-                interval can be specified in the histogram group, meaning that all fields being
-                grouped via the histogram must share the same interval.
-              `}
+              defaultMessage="This is the interval of histogram buckets to be generated when rolling
+                up, e.g. 5 will create buckets that are five units wide (0-5, 5-10, etc). Note that
+                only one interval can be specified in the histogram group, meaning that all fields
+                being grouped via the histogram must share the same interval."
            />
          )}
          fullWidth
--- a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_logistics.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_logistics.js
@ -157,22 +157,14 @@ export class StepLogisticsUi extends Component {
            error={errorRollupCron}
            isInvalid={Boolean(areStepErrorsVisible && errorRollupCron)}
            helpText={(
-              <Fragment>
-                <p>
+              <p>
+                <EuiLink href={cronUrl} target="_blank">
                  <FormattedMessage
-                    id="xpack.rollupJobs.create.stepLogistics.fieldCron.helpReferenceLabel"
-                    defaultMessage="{link}"
-                    values={{ link: (
-                      <EuiLink href={cronUrl} target="_blank">
-                        <FormattedMessage
-                          id="xpack.rollupJobs.create.stepLogistics.fieldCron.helpReference.link"
-                          defaultMessage="Learn more about cron expressions"
-                        />
-                      </EuiLink>
-                    ) }}
+                    id="xpack.rollupJobs.create.stepLogistics.fieldCron.helpReferenceLinkLabel"
+                    defaultMessage="Learn more about cron expressions"
                  />
-                </p>
-              </Fragment>
+                </EuiLink>
+              </p>
            )}
            fullWidth
          >
@ -187,7 +179,7 @@ export class StepLogisticsUi extends Component {
          <EuiText size="s">
            <EuiLink onClick={this.hideAdvancedCron}>
              <FormattedMessage
-                id="xpack.rollupJobs.create.stepLogistics.sectionSchedule.buttonAdvancedLabel"
+                id="xpack.rollupJobs.create.stepLogistics.sectionSchedule.buttonBasicLabel"
                defaultMessage="Create basic interval"
              />
            </EuiLink>
@ -270,7 +262,7 @@ export class StepLogisticsUi extends Component {
            <EuiText>
              <p>
                <FormattedMessage
-                  id="xpack.rollupJobs.create.stepLogisticsDescription"
+                  id="xpack.rollupJobs.create.stepLogistics.logisticsDescription"
                  defaultMessage="Define how to run the rollup job and when to index the documents."
                />
              </p>
@ -416,9 +408,7 @@ export class StepLogisticsUi extends Component {
            description={(
              <FormattedMessage
                id="xpack.rollupJobs.create.stepLogistics.sectionScheduleDescription"
-                defaultMessage={`
-                  How often do you want to roll up the data?
-                `}
+                defaultMessage="How often do you want to roll up the data?"
              />
            )}
            fullWidth
@ -440,10 +430,7 @@ export class StepLogisticsUi extends Component {
            description={(
              <FormattedMessage
                id="xpack.rollupJobs.create.stepLogistics.sectionPageSizeDescription"
-                defaultMessage={`
-                  A larger page size
-                  will roll up data quicker, but requires more memory.
-                `}
+                defaultMessage="A larger page size will roll up data quicker, but requires more memory."
              />
            )}
            fullWidth
@ -474,7 +461,7 @@ export class StepLogisticsUi extends Component {
              <EuiTitle size="xs">
                <h5>
                  <FormattedMessage
-                    id="xpack.rollupJobs.create.stepLogistics.sectionPageSizeTitle"
+                    id="xpack.rollupJobs.create.stepLogistics.sectionDelayTitle"
                    defaultMessage="How long should the rollup job wait before rolling up new data?"
                  />
                </h5>
@ -483,11 +470,9 @@ export class StepLogisticsUi extends Component {
            description={(
              <FormattedMessage
                id="xpack.rollupJobs.create.stepLogistics.sectionDelayDescription"
-                defaultMessage={`
-                  A latency buffer will delay rolling up data. This will yield a higher-fidelity
-                  rollup by allowing for variable ingest latency. By default, the rollup job
-                  attempts to roll up all data that is available.
-                `}
+                defaultMessage="A latency buffer will delay rolling up data. This will yield a
+                  higher-fidelity rollup by allowing for variable ingest latency. By default, the
+                  rollup job attempts to roll up all data that is available."
              />
            )}
            fullWidth
--- a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_metrics.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_metrics.js
@ -189,10 +189,8 @@ export class StepMetricsUi extends Component {
              <p>
                <FormattedMessage
                  id="xpack.rollupJobs.create.stepMetricsDescription"
-                  defaultMessage={`
-                    Select the metrics to collect while rolling up data. By default,
-                    only doc_counts are collected for each group.
-                  `}
+                  defaultMessage="Select the metrics to collect while rolling up data. By default,
+                    only doc_counts are collected for each group."
                />
              </p>
            </EuiText>
--- a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_review.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_review.js
@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';

 import {
+  EuiErrorBoundary,
  EuiSpacer,
  EuiTab,
  EuiTabs,
@ -24,6 +25,7 @@ import {
  JOB_DETAILS_TAB_HISTOGRAM,
  JOB_DETAILS_TAB_METRICS,
  JOB_DETAILS_TAB_JSON,
+  tabToHumanizedMap,
 } from '../../components';

 const JOB_DETAILS_TABS = [
@ -81,7 +83,7 @@ export class StepReviewUi extends Component {
          data-test-subj={`stepReviewTab${isSelected ? 'Selected' : ''}`}
          key={index}
        >
-          {tab}
+          {tabToHumanizedMap[tab]}
        </EuiTab>
      );
    });
@ -119,11 +121,13 @@ export class StepReviewUi extends Component {

        {this.renderTabs()}

-        <JobDetails
-          job={job}
-          json={json}
-          tab={selectedTab}
-        />
+        <EuiErrorBoundary>
+          <JobDetails
+            job={job}
+            json={json}
+            tab={selectedTab}
+          />
+        </EuiErrorBoundary>
      </Fragment>
    );
  }
--- a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_terms.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_terms.js
@ -96,11 +96,9 @@ export class StepTermsUi extends Component {
              <p>
                <FormattedMessage
                  id="xpack.rollupJobs.create.stepTermsDescription"
-                  defaultMessage={`
-                    Select the fields you want to bucket using terms aggregations. This can be
-                    costly for high-cardinality fields such as IP addresses,
-                    if the time bucket is sparse.
-                  `}
+                  defaultMessage="Select the fields you want to bucket using terms aggregations.
+                    This can be costly for high-cardinality fields such as IP addresses,
+                    if the time bucket is sparse."
                />
              </p>
            </EuiText>
--- a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps_config/validate_rollup_index.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps_config/validate_rollup_index.js
@ -67,7 +67,7 @@ export function validateRollupIndex(rollupIndex, indexPattern) {
  if (rollupIndex[0] === '.') {
    return [(
      <FormattedMessage
-        id="xpack.rollupJobs.create.errors.rollupIndexSpaces"
+        id="xpack.rollupJobs.create.errors.rollupIndexBeginningPeriod"
        defaultMessage="Index names cannot begin with periods."
      />
    )];
--- a/x-pack/plugins/rollup/public/crud_app/sections/job_list/detail_panel/detail_panel.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/job_list/detail_panel/detail_panel.js
@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';

 import {
+  EuiErrorBoundary,
  EuiFlexGroup,
  EuiFlexItem,
  EuiFlyout,
@ -33,6 +34,7 @@ import {
  JOB_DETAILS_TAB_HISTOGRAM,
  JOB_DETAILS_TAB_METRICS,
  JOB_DETAILS_TAB_JSON,
+  tabToHumanizedMap,
 } from '../../components';

 const JOB_DETAILS_TABS = [
@ -98,7 +100,7 @@ export class DetailPanelUi extends Component {
          data-test-subj={`detailPanelTab${isSelected ? 'Selected' : ''}`}
          key={index}
        >
-          {tab}
+          {tabToHumanizedMap[tab]}
        </EuiTab>
      );
    });
@ -136,12 +138,14 @@ export class DetailPanelUi extends Component {
    return (
      <Fragment>
        <EuiFlyoutBody>
-          <JobDetails
-            tab={panelType}
-            job={job}
-            stats={stats}
-            json={json}
-          />
+          <EuiErrorBoundary>
+            <JobDetails
+              tab={panelType}
+              job={job}
+              stats={stats}
+              json={json}
+            />
+          </EuiErrorBoundary>
        </EuiFlyoutBody>

        <EuiFlyoutFooter>
--- a/x-pack/plugins/rollup/public/crud_app/sections/job_list/job_list.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/job_list/job_list.js
@ -141,9 +141,8 @@ export class JobListUi extends Component {
            <p>
              <FormattedMessage
                id="xpack.rollupJobs.jobList.emptyPromptDescription"
-                defaultMessage={`
-                Rollup jobs summarize and store historical data in a smaller index for future analysis.
-                `}
+                defaultMessage="Rollup jobs summarize and store historical data in a smaller index
+                  for future analysis."
              />
            </p>
          </Fragment>