translate InfraOps visualization component (Part 3)

.i18nrc.json

@@ -16,6 +16,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.monitoring": "x-pack/plugins/monitoring",
     "xpack.rollupJobs": "x-pack/plugins/rollup",
@@ -25,6 +26,8 @@
   },
   "exclude": [
     "src/ui/ui_render/bootstrap/app_bootstrap.js",
-    "src/ui/ui_render/ui_render_mixin.js"
+    "src/ui/ui_render/ui_render_mixin.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,35 +10,43 @@ import {
   EuiHeaderBreadcrumbs,
   EuiHeaderSection,
 } from '@elastic/eui';
+import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import React from 'react';
 import styled from 'styled-components';
 
 interface HeaderProps {
   breadcrumbs?: EuiBreadcrumbDefinition[];
   appendSections?: React.ReactNode;
+  intl: InjectedIntl;
 }
 
-export class Header extends React.PureComponent<HeaderProps> {
-  private staticBreadcrumbs = [
-    {
-      href: '#/',
-      text: 'Infrastructure',
-    },
-  ];
+export const Header = injectI18n(
+  class extends React.PureComponent<HeaderProps> {
+    public static displayName = 'Header';
 
-  public render() {
-    const { breadcrumbs = [], appendSections = null } = this.props;
+    public render() {
+      const { breadcrumbs = [], appendSections = null, intl } = this.props;
+      const staticBreadcrumbs = [
+        {
+          href: '#/',
+          text: intl.formatMessage({
+            id: 'xpack.infra.header.infrastructureTitle',
+            defaultMessage: 'Infrastructure',
+          }),
+        },
+      ];
 
-    return (
-      <HeaderWrapper>
-        <EuiHeaderSection>
-          <EuiHeaderBreadcrumbs breadcrumbs={[...this.staticBreadcrumbs, ...breadcrumbs]} />
-        </EuiHeaderSection>
-        {appendSections}
-      </HeaderWrapper>
-    );
+      return (
+        <HeaderWrapper>
+          <EuiHeaderSection>
+            <EuiHeaderBreadcrumbs breadcrumbs={[...staticBreadcrumbs, ...breadcrumbs]} />
+          </EuiHeaderSection>
+          {appendSections}
+        </HeaderWrapper>
+      );
+    }
   }
-}
+);
 
 const HeaderWrapper = styled(EuiHeader)`
   height: 29px;

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,13 @@ export class SearchMarker extends React.PureComponent<SearchMarkerProps, SearchM
       <>
         {hoveredPosition ? (
           <SearchMarkerTooltip markerPosition={hoveredPosition}>
-            {bucket.count} {bucket.count === 1 ? 'search result' : 'search results'}
+            <FormattedMessage
+              id="xpack.infra.logs.searchResultTooltip"
+              defaultMessage="{bucketCount, plural, one {# search result} other {# search results}}"
+              values={{
+                bucketCount: bucket.count,
+              }}
+            />
           </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 { FormattedMessage } from '@kbn/i18n/react';
 import * as React from 'react';
 
 interface IntervalSizeDescriptor {
@@ -35,7 +36,14 @@ export class LogMinimapScaleControls extends React.PureComponent<LogMinimapScale
     const [currentSizeDescriptor] = availableIntervalSizes.filter(intervalSizeEquals(intervalSize));
 
     return (
-      <EuiFormRow label="Minimap Scale">
+      <EuiFormRow
+        label={
+          <FormattedMessage
+            id="xpack.infra.logs.customizeLogs.minimapScaleFormRowLabel"
+            defaultMessage="Minimap Scale"
+          />
+        }
+      >
         <EuiRadioGroup
           options={availableIntervalSizes.map(sizeDescriptor => ({
             id: getIntervalSizeDescriptorKey(sizeDescriptor),

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,56 +15,66 @@ interface LogSearchInputProps {
   isLoading: boolean;
   onSearch: (query: string) => void;
   onClear: () => void;
+  intl: InjectedIntl;
 }
 
 interface LogSearchInputState {
   query: string;
 }
 
-export class LogSearchInput extends React.PureComponent<LogSearchInputProps, LogSearchInputState> {
-  public readonly state = {
-    query: '',
-  };
+export const LogSearchInput = injectI18n(
+  class extends React.PureComponent<LogSearchInputProps, LogSearchInputState> {
+    public static displayName = 'LogSearchInput';
+    public readonly state = {
+      query: '',
+    };
 
-  public handleSubmit: React.FormEventHandler<HTMLFormElement> = evt => {
-    evt.preventDefault();
+    public handleSubmit: React.FormEventHandler<HTMLFormElement> = evt => {
+      evt.preventDefault();
 
-    const { query } = this.state;
+      const { query } = this.state;
 
-    if (query === '') {
-      this.props.onClear();
-    } else {
-      this.props.onSearch(this.state.query);
-    }
-  };
+      if (query === '') {
+        this.props.onClear();
+      } else {
+        this.props.onSearch(this.state.query);
+      }
+    };
 
-  public handleChangeQuery: React.ChangeEventHandler<HTMLInputElement> = evt => {
-    this.setState({
-      query: evt.target.value,
-    });
-  };
+    public handleChangeQuery: React.ChangeEventHandler<HTMLInputElement> = evt => {
+      this.setState({
+        query: evt.target.value,
+      });
+    };
 
-  public render() {
-    const { className, isLoading } = this.props;
-    const { query } = this.state;
+    public render() {
+      const { className, isLoading, intl } = this.props;
+      const { query } = this.state;
 
-    const classes = classNames('loggingSearchInput', className);
+      const classes = classNames('loggingSearchInput', className);
 
-    return (
-      <form onSubmit={this.handleSubmit}>
-        <PlainSearchField
-          aria-label="search"
-          className={classes}
-          fullWidth
-          isLoading={isLoading}
-          onChange={this.handleChangeQuery}
-          placeholder="Search"
-          value={query}
-        />
-      </form>
-    );
+      return (
+        <form onSubmit={this.handleSubmit}>
+          <PlainSearchField
+            aria-label={intl.formatMessage({
+              id: 'xpack.infra.logs.search.searchInLogsAriaLabel',
+              defaultMessage: 'search',
+            })}
+            className={classes}
+            fullWidth
+            isLoading={isLoading}
+            onChange={this.handleChangeQuery}
+            placeholder={intl.formatMessage({
+              id: 'xpack.infra.logs.search.searchInLogsPlaceholder',
+              defaultMessage: 'Search',
+            })}
+            value={query}
+          />
+        </form>
+      );
+    }
   }
-}
+);
 
 const PlainSearchField = styled(EuiFieldSearch)`
   background: transparent;

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

@@ -5,6 +5,7 @@
  */
 
 import { EuiFormRow, EuiRadioGroup } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import * as React from 'react';
 
 import { getLabelOfTextScale, isTextScale, TextScale } from '../../../common/log_text_scale';
@@ -26,7 +27,14 @@ export class LogTextScaleControls extends React.PureComponent<LogTextScaleContro
     const { availableTextScales, textScale } = this.props;
 
     return (
-      <EuiFormRow label="Text Size">
+      <EuiFormRow
+        label={
+          <FormattedMessage
+            id="xpack.infra.logs.customizeLogs.textSizeFormRowLabel"
+            defaultMessage="Text Size"
+          />
+        }
+      >
         <EuiRadioGroup
           options={availableTextScales.map((availableTextScale: TextScale) => ({
             id: availableTextScale.toString(),

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.checkForNewDataButtonLabel"
+              defaultMessage="Check for new data"
+            />
           </EuiButton>
         }
       />