translate InfraOps visualization component (Part 3)

.i18nrc.json

@@ -15,6 +15,7 @@
     "tagCloud": "src/core_plugins/tagcloud",
     "xpack.grokDebugger": "x-pack/plugins/grokdebugger",
     "xpack.idxMgmt": "x-pack/plugins/index_management",
+    "xpack.infra": "x-pack/plugins/infra",
     "xpack.licenseMgmt": "x-pack/plugins/license_management",
     "xpack.rollupJobs": "x-pack/plugins/rollup",
     "xpack.searchProfiler": "x-pack/plugins/searchprofiler",
@@ -25,6 +26,8 @@
     "src/ui/ui_render/bootstrap/app_bootstrap.js",
     "src/ui/ui_render/ui_render_mixin.js",
     "x-pack/plugins/monitoring/public/components/cluster/overview/alerts_panel.js",
-    "x-pack/plugins/monitoring/public/directives/alerts/index.js"
+    "x-pack/plugins/monitoring/public/directives/alerts/index.js",
+    "x-pack/plugins/infra/public/utils/loading_state/loading_result.ts",
+    "x-pack/plugins/infra/server/lib/domains/log_entries_domain/log_entries_domain.ts"
   ]
 }

x-pack/plugins/infra/public/apps/start_app.tsx

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { I18nProvider } from '@kbn/i18n/react';
 import { createHashHistory } from 'history';
 import React from 'react';
 import { ApolloProvider } from 'react-apollo';
@@ -29,14 +30,16 @@ export async function startApp(libs: InfraFrontendLibs) {
   });
 
   libs.framework.render(
-    <EuiErrorBoundary>
-      <ReduxStoreProvider store={store}>
-        <ApolloProvider client={libs.apolloClient}>
-          <ThemeProvider theme={{ eui: euiVars }}>
-            <PageRouter history={history} />
-          </ThemeProvider>
-        </ApolloProvider>
-      </ReduxStoreProvider>
-    </EuiErrorBoundary>
+    <I18nProvider>
+      <EuiErrorBoundary>
+        <ReduxStoreProvider store={store}>
+          <ApolloProvider client={libs.apolloClient}>
+            <ThemeProvider theme={{ eui: euiVars }}>
+              <PageRouter history={history} />
+            </ThemeProvider>
+          </ApolloProvider>
+        </ReduxStoreProvider>
+      </EuiErrorBoundary>
+    </I18nProvider>
   );
 }

x-pack/plugins/infra/public/components/header.tsx

@@ -10,6 +10,7 @@ import {
   EuiHeaderBreadcrumbs,
   EuiHeaderSection,
 } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -22,7 +23,9 @@ export class Header extends React.PureComponent<HeaderProps> {
   private staticBreadcrumbs = [
     {
       href: '#/',
-      text: 'Infrastructure',
+      text: i18n.translate('xpack.infra.header.infrastructureTitle', {
+        defaultMessage: 'Infrastructure',
+      }),
     },
   ];
 

x-pack/plugins/infra/public/components/logging/log_customization_menu.tsx

@@ -5,6 +5,7 @@
  */
 
 import { EuiButtonEmpty, EuiPopover } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import * as React from 'react';
 import styled from 'styled-components';
 
@@ -41,7 +42,10 @@ export class LogCustomizationMenu extends React.Component<{}, LogCustomizationMe
 
     const menuButton = (
       <EuiButtonEmpty color="text" iconType="gear" onClick={this.toggleVisibility} size="xs">
-        Customize
+        <FormattedMessage
+          id="xpack.infra.logs.customizeLogs.customizeButtonLabel"
+          defaultMessage="Customize"
+        />
       </EuiButtonEmpty>
     );
 

x-pack/plugins/infra/public/components/logging/log_minimap/search_marker.tsx

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { FormattedMessage } from '@kbn/i18n/react';
 import * as React from 'react';
 import styled, { keyframes } from 'styled-components';
 
@@ -70,7 +71,18 @@ export class SearchMarker extends React.PureComponent<SearchMarkerProps, SearchM
       <>
         {hoveredPosition ? (
           <SearchMarkerTooltip markerPosition={hoveredPosition}>
-            {bucket.count} {bucket.count === 1 ? 'search result' : 'search results'}
+            {bucket.count}
+            {bucket.count === 1 ? (
+              <FormattedMessage
+                id="xpack.infra.logs.searchResultTitle"
+                defaultMessage="search result"
+              />
+            ) : (
+              <FormattedMessage
+                id="xpack.infra.logs.searchResultsTitle"
+                defaultMessage="search results"
+              />
+            )}
           </SearchMarkerTooltip>
         ) : null}
         <SearchMarkerGroup

x-pack/plugins/infra/public/components/logging/log_minimap_scale_controls.tsx

@@ -5,6 +5,7 @@
  */
 
 import { EuiFormRow, EuiRadioGroup } from '@elastic/eui';
+import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import * as React from 'react';
 
 interface IntervalSizeDescriptor {
@@ -16,9 +17,10 @@ interface LogMinimapScaleControlsProps {
   availableIntervalSizes: IntervalSizeDescriptor[];
   intervalSize: number;
   setIntervalSize: (intervalSize: number) => any;
+  intl: InjectedIntl;
 }
 
-export class LogMinimapScaleControls extends React.PureComponent<LogMinimapScaleControlsProps> {
+class LogMinimapScaleControlsUI extends React.PureComponent<LogMinimapScaleControlsProps> {
   public handleScaleChange = (intervalSizeDescriptorKey: string) => {
     const { availableIntervalSizes, setIntervalSize } = this.props;
     const [sizeDescriptor] = availableIntervalSizes.filter(
@@ -31,11 +33,16 @@ export class LogMinimapScaleControls extends React.PureComponent<LogMinimapScale
   };
 
   public render() {
-    const { availableIntervalSizes, intervalSize } = this.props;
+    const { availableIntervalSizes, intervalSize, intl } = this.props;
     const [currentSizeDescriptor] = availableIntervalSizes.filter(intervalSizeEquals(intervalSize));
 
     return (
-      <EuiFormRow label="Minimap Scale">
+      <EuiFormRow
+        label={intl.formatMessage({
+          id: 'xpack.infra.logs.customizeLogs.minimapScaleFormRowLabel',
+          defaultMessage: 'Minimap Scale',
+        })}
+      >
         <EuiRadioGroup
           options={availableIntervalSizes.map(sizeDescriptor => ({
             id: getIntervalSizeDescriptorKey(sizeDescriptor),
@@ -57,3 +64,5 @@ const intervalKeyEquals = (key: string) => (sizeDescriptor: IntervalSizeDescript
 
 const intervalSizeEquals = (size: number) => (sizeDescriptor: IntervalSizeDescriptor) =>
   sizeDescriptor.intervalSize === size;
+
+export const LogMinimapScaleControls = injectI18n(LogMinimapScaleControlsUI);

x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_buttons.tsx

@@ -5,6 +5,7 @@
  */
 
 import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import classNames from 'classnames';
 import * as React from 'react';
 
@@ -51,7 +52,10 @@ export class LogSearchButtons extends React.PureComponent<LogSearchButtonsProps,
             isDisabled={!hasPreviousSearchResult}
             size="s"
           >
-            Previous
+            <FormattedMessage
+              id="xpack.infra.logs.search.previousButtonLabel"
+              defaultMessage="Previous"
+            />
           </EuiButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem>
@@ -62,7 +66,7 @@ export class LogSearchButtons extends React.PureComponent<LogSearchButtonsProps,
             isDisabled={!hasNextSearchResult}
             size="s"
           >
-            Next
+            <FormattedMessage id="xpack.infra.logs.search.nextButtonLabel" defaultMessage="Next" />
           </EuiButtonEmpty>
         </EuiFlexItem>
       </EuiFlexGroup>

x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_input.tsx

@@ -5,6 +5,7 @@
  */
 
 import { EuiFieldSearch } from '@elastic/eui';
+import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import classNames from 'classnames';
 import * as React from 'react';
 import styled from 'styled-components';
@@ -14,13 +15,14 @@ interface LogSearchInputProps {
   isLoading: boolean;
   onSearch: (query: string) => void;
   onClear: () => void;
+  intl: InjectedIntl;
 }
 
 interface LogSearchInputState {
   query: string;
 }
 
-export class LogSearchInput extends React.PureComponent<LogSearchInputProps, LogSearchInputState> {
+class LogSearchInputUI extends React.PureComponent<LogSearchInputProps, LogSearchInputState> {
   public readonly state = {
     query: '',
   };
@@ -44,20 +46,26 @@ export class LogSearchInput extends React.PureComponent<LogSearchInputProps, Log
   };
 
   public render() {
-    const { className, isLoading } = this.props;
+    const { className, isLoading, intl } = this.props;
     const { query } = this.state;
 
     const classes = classNames('loggingSearchInput', className);
 
     return (
       <form onSubmit={this.handleSubmit}>
         <PlainSearchField
-          aria-label="search"
+          aria-label={intl.formatMessage({
+            id: 'xpack.infra.logs.search.searchInLogsAriaLabel',
+            defaultMessage: 'search',
+          })}
           className={classes}
           fullWidth
           isLoading={isLoading}
           onChange={this.handleChangeQuery}
-          placeholder="Search"
+          placeholder={intl.formatMessage({
+            id: 'xpack.infra.logs.search.searchInLogsPlaceholder',
+            defaultMessage: 'Search',
+          })}
           value={query}
         />
       </form>
@@ -73,3 +81,5 @@ const PlainSearchField = styled(EuiFieldSearch)`
     box-shadow: inset 0 -2px 0 0 ${props => props.theme.eui.euiColorPrimary};
   }
 `;
+
+export const LogSearchInput = injectI18n(LogSearchInputUI);

x-pack/plugins/infra/public/components/logging/log_text_scale_controls.tsx

@@ -5,6 +5,7 @@
  */
 
 import { EuiFormRow, EuiRadioGroup } from '@elastic/eui';
+import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import * as React from 'react';
 
 import { getLabelOfTextScale, isTextScale, TextScale } from '../../../common/log_text_scale';
@@ -13,20 +14,26 @@ interface LogTextScaleControlsProps {
   availableTextScales: TextScale[];
   textScale: TextScale;
   setTextScale: (scale: TextScale) => any;
+  intl: InjectedIntl;
 }
 
-export class LogTextScaleControls extends React.PureComponent<LogTextScaleControlsProps> {
+class LogTextScaleControlsUI extends React.PureComponent<LogTextScaleControlsProps> {
   public setTextScale = (textScale: string) => {
     if (isTextScale(textScale)) {
       this.props.setTextScale(textScale);
     }
   };
 
   public render() {
-    const { availableTextScales, textScale } = this.props;
+    const { availableTextScales, textScale, intl } = this.props;
 
     return (
-      <EuiFormRow label="Text Size">
+      <EuiFormRow
+        label={intl.formatMessage({
+          id: 'xpack.infra.logs.customizeLogs.textSizeFormRowLabel',
+          defaultMessage: 'Text Size',
+        })}
+      >
         <EuiRadioGroup
           options={availableTextScales.map((availableTextScale: TextScale) => ({
             id: availableTextScale.toString(),
@@ -39,3 +46,5 @@ export class LogTextScaleControls extends React.PureComponent<LogTextScaleContro
     );
   }
 }
+
+export const LogTextScaleControls = injectI18n(LogTextScaleControlsUI);

x-pack/plugins/infra/public/components/logging/log_text_stream/empty_view.tsx

@@ -5,6 +5,7 @@
  */
 
 import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import * as React from 'react';
 
 interface LogTextStreamEmptyViewProps {
@@ -17,12 +18,29 @@ export class LogTextStreamEmptyView extends React.PureComponent<LogTextStreamEmp
 
     return (
       <EuiEmptyPrompt
-        title={<h2>There are no log messages to display.</h2>}
+        title={
+          <h2>
+            <FormattedMessage
+              id="xpack.infra.logs.emptyView.noLogMessageTitle"
+              defaultMessage="There are no log messages to display."
+            />
+          </h2>
+        }
         titleSize="m"
-        body={<p>Try adjusting your filter.</p>}
+        body={
+          <p>
+            <FormattedMessage
+              id="xpack.infra.logs.emptyView.noLogMessageDescription"
+              defaultMessage="Try adjusting your filter."
+            />
+          </p>
+        }
         actions={
           <EuiButton iconType="refresh" color="primary" fill onClick={reload}>
-            Check for new data
+            <FormattedMessage
+              id="xpack.infra.logs.emptyView.noLogMessageButtonLabel"
+              defaultMessage="Check for new data"
+            />
           </EuiButton>
         }
       />