Skip to content

Commit

Permalink
translate InfraOps visualization component (Part 3) (#25213)
Browse files Browse the repository at this point in the history
* translate InfraOps visualization component (Part 3 - part of folder components)

* update translation of Infra Ops vizualization component (Part 3)

* update translation of Infra Ops vizualization component (Part 3)

* change some ids and add pluralization

* update Infra Ops Part 3 - change some ids, change some intl.formatMessage() to <FormattedMessage> and directly wrap some classes by injectI18n()

* update Infra-III - add static to displayName
  • Loading branch information
tibmt authored Nov 27, 2018
1 parent fa7518f commit 624f060
Show file tree
Hide file tree
Showing 11 changed files with 192 additions and 73 deletions.
44 changes: 26 additions & 18 deletions x-pack/plugins/infra/public/components/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
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,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
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 { FormattedMessage } from '@kbn/i18n/react';
import * as React from 'react';

interface IntervalSizeDescriptor {
Expand Down Expand Up @@ -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),
Expand Down
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,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;
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 { FormattedMessage } from '@kbn/i18n/react';
import * as React from 'react';

import { getLabelOfTextScale, isTextScale, TextScale } from '../../../common/log_text_scale';
Expand All @@ -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(),
Expand Down
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.checkForNewDataButtonLabel"
defaultMessage="Check for new data"
/>
</EuiButton>
}
/>
Expand Down
Loading

0 comments on commit 624f060

Please sign in to comment.