Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

translate InfraOps visualization component (Part 3) #25213

Merged
merged 11 commits into from
Nov 27, 2018
Merged
5 changes: 4 additions & 1 deletion .i18nrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
]
}
21 changes: 12 additions & 9 deletions x-pack/plugins/infra/public/apps/start_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
);
}
5 changes: 4 additions & 1 deletion x-pack/plugins/infra/public/components/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
EuiHeaderBreadcrumbs,
EuiHeaderSection,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
import styled from 'styled-components';

Expand All @@ -22,7 +23,9 @@ export class Header extends React.PureComponent<HeaderProps> {
private staticBreadcrumbs = [
{
href: '#/',
text: 'Infrastructure',
text: i18n.translate('xpack.infra.header.infrastructureTitle', {
tibmt marked this conversation as resolved.
Show resolved Hide resolved
defaultMessage: 'Infrastructure',
}),
},
];

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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>
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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"
tibmt marked this conversation as resolved.
Show resolved Hide resolved
defaultMessage="search result"
tibmt marked this conversation as resolved.
Show resolved Hide resolved
/>
) : (
<FormattedMessage
id="xpack.infra.logs.searchResultsTitle"
defaultMessage="search results"
/>
)}
</SearchMarkerTooltip>
) : null}
<SearchMarkerGroup
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
*/

import { EuiFormRow, EuiRadioGroup } from '@elastic/eui';
import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
import * as React from 'react';

interface IntervalSizeDescriptor {
Expand All @@ -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(
Expand All @@ -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({
tibmt marked this conversation as resolved.
Show resolved Hide resolved
id: 'xpack.infra.logs.customizeLogs.minimapScaleFormRowLabel',
defaultMessage: 'Minimap Scale',
})}
>
<EuiRadioGroup
options={availableIntervalSizes.map(sizeDescriptor => ({
id: getIntervalSizeDescriptorKey(sizeDescriptor),
Expand All @@ -57,3 +64,5 @@ const intervalKeyEquals = (key: string) => (sizeDescriptor: IntervalSizeDescript

const intervalSizeEquals = (size: number) => (sizeDescriptor: IntervalSizeDescriptor) =>
sizeDescriptor.intervalSize === size;

export const LogMinimapScaleControls = injectI18n(LogMinimapScaleControlsUI);
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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: '',
};
Expand All @@ -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>
Expand All @@ -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);
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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({
tibmt marked this conversation as resolved.
Show resolved Hide resolved
id: 'xpack.infra.logs.customizeLogs.textSizeFormRowLabel',
defaultMessage: 'Text Size',
})}
>
<EuiRadioGroup
options={availableTextScales.map((availableTextScale: TextScale) => ({
id: availableTextScale.toString(),
Expand All @@ -39,3 +46,5 @@ export class LogTextScaleControls extends React.PureComponent<LogTextScaleContro
);
}
}

export const LogTextScaleControls = injectI18n(LogTextScaleControlsUI);
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
*/

import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import * as React from 'react';

interface LogTextStreamEmptyViewProps {
Expand All @@ -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"
tibmt marked this conversation as resolved.
Show resolved Hide resolved
defaultMessage="Check for new data"
/>
</EuiButton>
}
/>
Expand Down
Loading