translate InfraOps visualization component (Part 1 - folder pages) (e…

…lastic#25194) (elastic#25936) * translate InfraOps vizualization component (Part 1 - folder pages) * update translation of Beats Management vizualization component (Part 1 - folder components) * Update toolbar.tsx * update translation of Beats Management vizualization component (Part 1 - folder components) * update translation of Infra Ops vizualization component (Part 1) * update translation of Infra Ops vizualization component (Part 1) * update Infra Ops Part 1 - change some ids, change i18n.translate() to intl.formatMessage() and directly wrap some classes by injectI18n() * update Infra-I - add static to displayName, update some ids
simitt · Nov 21, 2018 · cd9802e · cd9802e
1 parent d9b81ce
commit cd9802e
Show file tree

Hide file tree

Showing 14 changed files with 788 additions and 320 deletions.
diff --git a/.i18nrc.json b/.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,9 @@
  },
  "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"
+
  ]
 }
diff --git a/x-pack/plugins/infra/public/apps/start_app.tsx b/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>
  );
 }
diff --git a/x-pack/plugins/infra/public/pages/404.tsx b/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.notFoundPage.noContentFoundErrorTitle"
+ defaultMessage="No content found"
+ />
+ </div>
+ );
  }
 }
diff --git a/x-pack/plugins/infra/public/pages/error.tsx b/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.errorPage.unexpectedErrorTitle"
+ 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.errorPage.tryAgainDescription "
+ defaultMessage="Please click the back button and try again."
+ />
+ </p>
  </EuiCallOut>
  </EuiPageContent>
  </EuiPageBody>

diff --git a/x-pack/plugins/infra/public/pages/home/index.tsx b/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';
@@ -20,37 +21,54 @@ 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 {
- public render() {
- return (
- <ColumnarPage>
- <WithSource>
- {({ metricIndicesExist }) =>
- metricIndicesExist || metricIndicesExist === null ? (
- <>
- <WithWaffleTimeUrlState />
- <WithWaffleFilterUrlState />
- <WithWaffleOptionsUrlState />
- <Header appendSections={<InfrastructureBetaBadgeHeaderSection />} />
- <HomeToolbar />
- <HomePageContent />
- </>
- ) : (
- <WithKibanaChrome>
- {({ basePath }) => (
- <EmptyPage
- title="Looks like you don't have any metrics indices."
- message="Let's add some!"
- actionLabel="Setup Instructions"
- actionUrl={`${basePath}/app/kibana#/home/tutorial_directory/metrics`}
- data-test-subj="noMetricsIndicesPrompt"
- />
- )}
- </WithKibanaChrome>
- )
- }
- </WithSource>
- </ColumnarPage>
- );
- }
+interface HomePageProps {
+ intl: InjectedIntl;
 }
+
+export const HomePage = injectI18n(
+ class extends React.PureComponent<HomePageProps, {}> {
+ public static displayName = 'HomePage';
+ public render() {
+ const { intl } = this.props;
+ return (
+ <ColumnarPage>
+ <WithSource>
+ {({ metricIndicesExist }) =>
+ metricIndicesExist || metricIndicesExist === null ? (
+ <>
+ <WithWaffleTimeUrlState />
+ <WithWaffleFilterUrlState />
+ <WithWaffleOptionsUrlState />
+ <Header appendSections={<InfrastructureBetaBadgeHeaderSection />} />
+ <HomeToolbar />
+ <HomePageContent />
+ </>
+ ) : (
+ <WithKibanaChrome>
+ {({ basePath }) => (
+ <EmptyPage
+ title={intl.formatMessage({
+ id: 'xpack.infra.homePage.noMetricsIndicesTitle',
+ defaultMessage: "Looks like you don't have any metrics indices.",
+ })}
+ message={intl.formatMessage({
+ id: 'xpack.infra.homePage.noMetricsIndicesDescription',
+ defaultMessage: "Let's add some!",
+ })}
+ actionLabel={intl.formatMessage({
+ id: 'xpack.infra.homePage.noMetricsIndicesActionLabel',
+ defaultMessage: 'Setup Instructions',
+ })}
+ actionUrl={`${basePath}/app/kibana#/home/tutorial_directory/metrics`}
+ data-test-subj="noMetricsIndicesPrompt"
+ />
+ )}
+ </WithKibanaChrome>
+ )
+ }
+ </WithSource>
+ </ColumnarPage>
+ );
+ }
+ }
+);
diff --git a/x-pack/plugins/infra/public/pages/home/toolbar.tsx b/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, injectI18n } from '@kbn/i18n/react';
 import React from 'react';
 
 import { AutocompleteField } from '../../components/autocomplete_field';
@@ -20,25 +22,45 @@ import { WithWaffleOptions } from '../../containers/waffle/with_waffle_options';
 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',
+const getTitle = (nodeType: string) => {
+ const TITLES = {
+ [InfraNodeType.host as string]: (
+ <FormattedMessage id="xpack.infra.homePage.toolbar.hostsTitle" defaultMessage="Hosts" />
+ ),
+ [InfraNodeType.pod as string]: (
+ <FormattedMessage
+ id="xpack.infra.homePage.toolbar.kubernetesPodsTitle"
+ defaultMessage="Kubernetes Pods"
+ />
+ ),
+ [InfraNodeType.container as string]: (
+ <FormattedMessage
+ id="xpack.infra.homePage.toolbar.dockerContainersTitle"
+ defaultMessage="Docker Containers"
+ />
+ ),
+ };
+ return TITLES[nodeType];
 };
 
-export const HomeToolbar: React.SFC = () => (
+export const HomeToolbar = injectI18n(({ intl }) => (
  <Toolbar>
  <EuiFlexGroup alignItems="center">
  <EuiFlexItem>
  <WithWaffleOptions>
  {({ nodeType }) => (
  <EuiTitle size="m">
- <h1>{TITLES[nodeType]}</h1>
+ <h1>{getTitle(nodeType)}</h1>
  </EuiTitle>
  )}
  </WithWaffleOptions>
  <EuiText color="subdued">
- <p>Showing the last 1 minute of data from the time period</p>
+ <p>
+ <FormattedMessage
+ id="xpack.infra.homePage.toolbar.showingLastOneMinuteDataText"
+ defaultMessage="Showing the last 1 minute of data from the time period"
+ />
+ </p>
  </EuiText>
  </EuiFlexItem>
  <WithWaffleOptions>
@@ -71,7 +93,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.homePage.toolbar.kqlSearchFieldPlaceholder',
+ defaultMessage: 'Search for infrastructure data… (e.g. host.name:host-1)',
+ })}
  suggestions={suggestions}
  value={filterQueryDraft ? filterQueryDraft.expression : ''}
  />
@@ -111,4 +136,4 @@ export const HomeToolbar: React.SFC = () => (
  </EuiFlexItem>
  </EuiFlexGroup>
  </Toolbar>
-);
+));
diff --git a/x-pack/plugins/infra/public/pages/link_to/redirect_to_node_logs.tsx b/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 { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import compose from 'lodash/fp/compose';
 import React from 'react';
 import { Redirect, RouteComponentProps } from 'react-router-dom';
@@ -15,31 +16,50 @@ import { replaceLogPositionInQueryString } from '../../containers/logs/with_log_
 import { WithSource } from '../../containers/with_source';
 import { getTimeFromLocation } from './query_params';
 
-type RedirectToNodeLogsProps = RouteComponentProps<{
+type RedirectToNodeLogsType = RouteComponentProps<{
  nodeName: string;
  nodeType: InfraNodeType;
 }>;
 
-export const RedirectToNodeLogs = ({
- match: {
- params: { nodeName, nodeType },
- },
- location,
-}: RedirectToNodeLogsProps) => (
- <WithSource>
- {({ configuredFields }) => {
- if (!configuredFields) {
- return <LoadingPage message={`Loading ${nodeType} logs`} />;
- }
-
- const searchString = compose(
- replaceLogFilterInQueryString(`${configuredFields[nodeType]}: ${nodeName}`),
- replaceLogPositionInQueryString(getTimeFromLocation(location))
- )('');
-
- return <Redirect to={`/logs?${searchString}`} />;
- }}
- </WithSource>
+interface RedirectToNodeLogsProps extends RedirectToNodeLogsType {
+ intl: InjectedIntl;
+}
+
+export const RedirectToNodeLogs = injectI18n(
+ ({
+ match: {
+ params: { nodeName, nodeType },
+ },
+ location,
+ intl,
+ }: RedirectToNodeLogsProps) => (
+ <WithSource>
+ {({ configuredFields }) => {
+ if (!configuredFields) {
+ return (
+ <LoadingPage
+ message={intl.formatMessage(
+ {
+ id: 'xpack.infra.redirectToNodeLogs.loadingNodeLogsMessage',
+ defaultMessage: 'Loading {nodeType} logs',
+ },
+ {
+ nodeType,
+ }
+ )}
+ />
+ );
+ }
+
+ const searchString = compose(
+ replaceLogFilterInQueryString(`${configuredFields[nodeType]}: ${nodeName}`),
+ replaceLogPositionInQueryString(getTimeFromLocation(location))
+ )('');
+
+ return <Redirect to={`/logs?${searchString}`} />;
+ }}
+ </WithSource>
+ )
 );
 
 export const getNodeLogsUrl = ({