translate InfraOps visualization component (Part 1 - folder pages)

x-pack/plugins/infra/public/pages/404.tsx

@@ -4,10 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
 
 export class NotFoundPage extends React.PureComponent {
  public render() {
- return <div>No content found</div>;
+ return (
+ <div>
+ <FormattedMessage
+ id="xpack.infra.homePageError.noContentFoundErrorTitle"
+ defaultMessage="No content found"
+ />
+ </div>
+ )
  }
 }

x-pack/plugins/infra/public/pages/error.tsx

@@ -12,6 +12,7 @@ import {
  EuiPageHeaderSection,
  EuiTitle,
 } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
 import styled from 'styled-components';
 import { Header } from '../components/header';
@@ -44,13 +45,23 @@ export const ErrorPageBody: React.SFC<{ message: string }> = ({ message }) => {
  <EuiPageHeader>
  <EuiPageHeaderSection>
  <EuiTitle size="m">
- <h1>Oops!</h1>
+ <h1>
+ <FormattedMessage
+ id="xpack.infra.homePageError.oopsErrorTitle"
+ defaultMessage="Oops!"
+ />
+ </h1>
  </EuiTitle>
  </EuiPageHeaderSection>
  </EuiPageHeader>
  <EuiPageContent>
  <EuiCallOut color="danger" title={message} iconType={'alert'}>
- <p>Please click the back button and try again.</p>
+ <p>
+ <FormattedMessage
+ id="xpack.infra.homePageError.clickBackButtonErrorTitle"
+ defaultMessage="Please click the back button and try again."
+ />
+ </p>
  </EuiCallOut>
  </EuiPageContent>
  </EuiPageBody>

x-pack/plugins/infra/public/pages/home/index.tsx

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import React from 'react';
 
 import { HomePageContent } from './page_content';
@@ -19,8 +20,13 @@ import { WithWaffleTimeUrlState } from '../../containers/waffle/with_waffle_time
 import { WithKibanaChrome } from '../../containers/with_kibana_chrome';
 import { WithSource } from '../../containers/with_source';
 
-export class HomePage extends React.PureComponent {
+interface HomePageProps {
+ intl: InjectedIntl;
+}
+
+class HomePageUI extends React.PureComponent<HomePageProps, {}> {
  public render() {
+ const { intl } = this.props;
  return (
  <ColumnarPage>
  <WithSource>
@@ -38,9 +44,18 @@ export class HomePage extends React.PureComponent {
  <WithKibanaChrome>
  {({ basePath }) => (
  <EmptyPage
- title="Looks like you don't have any metrics indices."
- message="Let's add some!"
- actionLabel="Setup Instructions"
+ title={intl.formatMessage({
+ id: 'xpack.infra.homePage.youDontHaveMetricsIndicesTitle',
+ defaultMessage: "Looks like you don't have any metrics indices.",
+ })}
+ message={intl.formatMessage({
+ id: 'xpack.infra.homePage.youDontHaveMetricsIndicesMessage',
+ defaultMessage: "Let's add some!",
+ })}
+ actionLabel={intl.formatMessage({
+ id: 'xpack.infra.homePage.setupInstructionsActionLabel',
+ defaultMessage: 'Setup Instructions',
+ })}
  actionUrl={`${basePath}/app/kibana#/home/tutorial_directory/metrics`}
  data-test-subj="noMetricsIndicesPrompt"
  />
@@ -53,3 +68,5 @@ export class HomePage extends React.PureComponent {
  );
  }
 }
+
+export const HomePage = injectI18n(HomePageUI);

x-pack/plugins/infra/public/pages/home/toolbar.tsx

@@ -5,6 +5,8 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import React from 'react';
 
 import { AutocompleteField } from '../../components/autocomplete_field';
@@ -21,12 +23,28 @@ import { WithWaffleTime } from '../../containers/waffle/with_waffle_time';
 import { WithKueryAutocompletion } from '../../containers/with_kuery_autocompletion';
 
 const TITLES = {
- [InfraNodeType.host]: 'Hosts',
- [InfraNodeType.pod]: 'Kubernetes Pods',
- [InfraNodeType.container]: 'Docker Containers',
+ [InfraNodeType.host]: i18n.translate('xpack.infra.homePageToolbar.homeToolbarHostsTitle', {
+ defaultMessage: 'Hosts',
+ }),
+ [InfraNodeType.pod]: i18n.translate(
+ 'xpack.infra.homePageToolbar.homeToolbarKubernetesPodsTitle',
+ {
+ defaultMessage: 'Kubernetes Pods',
+ }
+ ),
+ [InfraNodeType.container]: i18n.translate(
+ 'xpack.infra.homePageToolbar.homeToolbarDockerContainersTitle',
+ {
+ defaultMessage: 'Docker Containers',
+ }
+ ),
 };
 
-export const HomeToolbar: React.SFC = () => (
+interface Props {
+ intl: InjectedIntl;
+}
+
+const HomeToolbarUI: React.SFC<Props> = ({ intl }) => (
  <Toolbar>
  <EuiFlexGroup alignItems="center">
  <EuiFlexItem>
@@ -38,7 +56,12 @@ export const HomeToolbar: React.SFC = () => (
  )}
  </WithWaffleOptions>
  <EuiText color="subdued">
- <p>Showing the last 1 minute of data from the time period</p>
+ <p>
+ <FormattedMessage
+ id="xpack.infra.homePageToolbar.showingLastOneMinuteDataText"
+ defaultMessage="Showing the last 1 minute of data from the time period"
+ />
+ </p>
  </EuiText>
  </EuiFlexItem>
  <WithWaffleOptions>
@@ -71,7 +94,10 @@ export const HomeToolbar: React.SFC = () => (
  loadSuggestions={loadSuggestions}
  onChange={setFilterQueryDraftFromKueryExpression}
  onSubmit={applyFilterQueryFromKueryExpression}
- placeholder="Search for infrastructure data... (e.g. host.name:host-1)"
+ placeholder={intl.formatMessage({
+ id: 'xpack.infra.homePageToolbar.searchFieldPlaceholder',
+ defaultMessage: 'Search for infrastructure data… (e.g. host.name:host-1)',
+ })}
  suggestions={suggestions}
  value={filterQueryDraft ? filterQueryDraft.expression : ''}
  />
@@ -112,3 +138,5 @@ export const HomeToolbar: React.SFC = () => (
  </EuiFlexGroup>
  </Toolbar>
 );
+
+export const HomeToolbar = injectI18n(HomeToolbarUI);

x-pack/plugins/infra/public/pages/link_to/redirect_to_node_logs.tsx

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
 import compose from 'lodash/fp/compose';
 import React from 'react';
 import { Redirect, RouteComponentProps } from 'react-router-dom';
@@ -29,7 +30,16 @@ export const RedirectToNodeLogs = ({
  <WithSource>
  {({ configuredFields }) => {
  if (!configuredFields) {
- return <LoadingPage message={`Loading ${nodeType} logs`} />;
+ return (
+ <LoadingPage
+ message={i18n.translate('xpack.infra.redirectToNodeLogs.loadingNodeTypeLogsMessage', {
+ defaultMessage: 'Loading {nodeType} logs',
+ values: {
+ nodeType,
+ },
+ })}
+ />
+ );
  }
 
  const searchString = compose(

x-pack/plugins/infra/public/pages/logs/logs.tsx

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import React from 'react';
 
 import { LogsPageContent } from './page_content';
@@ -20,8 +21,13 @@ import { WithLogTextviewUrlState } from '../../containers/logs/with_log_textview
 import { WithKibanaChrome } from '../../containers/with_kibana_chrome';
 import { WithSource } from '../../containers/with_source';
 
-export class LogsPage extends React.Component {
+interface Props {
+ intl: InjectedIntl;
+}
+
+class LogsPageUI extends React.Component<Props> {
  public render() {
+ const { intl } = this.props;
  return (
  <ColumnarPage>
  <WithSource>
@@ -32,17 +38,35 @@ export class LogsPage extends React.Component {
  <WithLogPositionUrlState />
  <WithLogMinimapUrlState />
  <WithLogTextviewUrlState />
- <Header breadcrumbs={[{ text: 'Logs' }]} />
+ <Header
+ breadcrumbs={[
+ {
+ text: intl.formatMessage({
+ id: 'xpack.infra.homePageLogsPage.logsTitle',
+ defaultMessage: 'Logs',
+ }),
+ },
+ ]}
+ />
  <LogsToolbar />
  <LogsPageContent />
  </>
  ) : (
  <WithKibanaChrome>
  {({ basePath }) => (
  <EmptyPage
- title="Looks like you don't have any logging indices."
- message="Let's add some!"
- actionLabel="Setup Instructions"
+ title={intl.formatMessage({
+ id: 'xpack.infra.homePageLogsPage.youDontHaveLoggingIndicesTitle',
+ defaultMessage: "Looks like you don't have any logging indices.",
+ })}
+ message={intl.formatMessage({
+ id: 'xpack.infra.homePageLogsPage.addSomeLoggingIndicesDescription',
+ defaultMessage: "Let's add some!",
+ })}
+ actionLabel={intl.formatMessage({
+ id: 'xpack.infra.homePageLogsPage.setupInstructionsActionLabel',
+ defaultMessage: 'Setup Instructions',
+ })}
  actionUrl={`${basePath}/app/kibana#/home/tutorial_directory/logging`}
  />
  )}
@@ -54,3 +78,5 @@ export class LogsPage extends React.Component {
  );
  }
 }
+
+export const LogsPage = injectI18n(LogsPageUI);

x-pack/plugins/infra/public/pages/logs/toolbar.tsx

@@ -5,6 +5,7 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { I18nProvider, InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import React from 'react';
 
 import { AutocompleteField } from '../../components/autocomplete_field';
@@ -20,7 +21,11 @@ import { WithLogPosition } from '../../containers/logs/with_log_position';
 import { WithLogTextview } from '../../containers/logs/with_log_textview';
 import { WithKueryAutocompletion } from '../../containers/with_kuery_autocompletion';
 
-export const LogsToolbar: React.SFC = () => (
+interface Props {
+ intl: InjectedIntl;
+}
+
+const LogsToolbarUI: React.SFC<Props> = ({ intl }) => (
  <Toolbar>
  <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="none">
  <EuiFlexItem>
@@ -40,7 +45,10 @@ export const LogsToolbar: React.SFC = () => (
  loadSuggestions={loadSuggestions}
  onChange={setFilterQueryDraftFromKueryExpression}
  onSubmit={applyFilterQueryFromKueryExpression}
- placeholder="Search for log entries... (e.g. host.name:host-1)"
+ placeholder={intl.formatMessage({
+ id: 'xpack.infra.homePageLogsToolbar.searchFieldPlaceholder',
+ defaultMessage: 'Search for log entries... (e.g. host.name:host-1)',
+ })}
  suggestions={suggestions}
  value={filterQueryDraft ? filterQueryDraft.expression : ''}
  />
@@ -53,22 +61,26 @@ export const LogsToolbar: React.SFC = () => (
  <LogCustomizationMenu>
  <WithLogMinimap>
  {({ availableIntervalSizes, intervalSize, setIntervalSize }) => (
- <LogMinimapScaleControls
- availableIntervalSizes={availableIntervalSizes}
- setIntervalSize={setIntervalSize}
- intervalSize={intervalSize}
- />
+ <I18nProvider>
+ <LogMinimapScaleControls
+ availableIntervalSizes={availableIntervalSizes}
+ setIntervalSize={setIntervalSize}
+ intervalSize={intervalSize}
+ />
+ </I18nProvider>
  )}
  </WithLogMinimap>
  <WithLogTextview>
  {({ availableTextScales, textScale, setTextScale, setTextWrap, wrap }) => (
  <>
- <LogTextWrapControls wrap={wrap} setTextWrap={setTextWrap} />
- <LogTextScaleControls
- availableTextScales={availableTextScales}
- textScale={textScale}
- setTextScale={setTextScale}
- />
+ <I18nProvider>
+ <LogTextWrapControls wrap={wrap} setTextWrap={setTextWrap} />
+ <LogTextScaleControls
+ availableTextScales={availableTextScales}
+ textScale={textScale}
+ setTextScale={setTextScale}
+ />
+ </I18nProvider>
  </>
  )}
  </WithLogTextview>
@@ -96,3 +108,5 @@ export const LogsToolbar: React.SFC = () => (
  </EuiFlexGroup>
  </Toolbar>
 );
+
+export const LogsToolbar = injectI18n(LogsToolbarUI);