github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

translate InfraOps visualization component (Part 3) (#25213) (#26248)

Browse source 
* 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
This commit is contained in:
tibmt 2018-11-27 14:36:57 +02:00 • committed by Maryia Lapata
parent 9016da0dc0
commit 14e2396f89
11 changed files with 195 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

44
x-pack/plugins/infra/public/components/header.tsx
View file

@ -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;

6
x-pack/plugins/infra/public/components/logging/log_customization_menu.tsx
View file

@ -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>
);

9
x-pack/plugins/infra/public/components/logging/log_minimap/search_marker.tsx
View file

@ -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

10
x-pack/plugins/infra/public/components/logging/log_minimap_scale_controls.tsx
View file

@ -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),

8
x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_buttons.tsx
View file

@ -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>

89
x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_input.tsx
View file

@ -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 render() {
const { className, isLoading, intl } = this.props;
const { query } = this.state;
const classes = classNames('loggingSearchInput', className);
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>
);
}
};
public handleChangeQuery: React.ChangeEventHandler<HTMLInputElement> = evt => {
this.setState({
query: evt.target.value,
});
};
public render() {
const { className, isLoading } = this.props;
const { query } = this.state;
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>
);
}
}
);
const PlainSearchField = styled(EuiFieldSearch)`
background: transparent;

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

@ -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(),

24
x-pack/plugins/infra/public/components/logging/log_text_stream/empty_view.tsx
View file

@ -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>
}
/>

39
x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx
View file

@ -5,6 +5,7 @@
*/
import { EuiButtonEmpty, EuiIcon, EuiProgress, EuiText } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import * as React from 'react';
import styled from 'styled-components';
@ -39,13 +40,26 @@ export class LogTextStreamLoadingItemView extends React.PureComponent<
return (
<ProgressEntry alignment={alignment} className={className} color="primary" isLoading={true}>
<ProgressMessage>
<EuiText color="subdued">Streaming new entries</EuiText>
<EuiText color="subdued">
<FormattedMessage
id="xpack.infra.logs.streamingNewEntriesText"
defaultMessage="Streaming new entries"
/>
</EuiText>
</ProgressMessage>
{lastStreamingUpdate ? (
<ProgressMessage>
<EuiText color="subdued">
<EuiIcon type="clock" /> last updated{' '}
<RelativeTime time={lastStreamingUpdate} refreshInterval={1000} /> ago
<EuiIcon type="clock" />
<FormattedMessage
id="xpack.infra.logs.lastStreamingUpdateText"
defaultMessage=" last updated {lastUpdateTime} ago"
values={{
lastUpdateTime: (
<RelativeTime time={lastStreamingUpdate} refreshInterval={1000} />
),
}}
/>
</EuiText>
</ProgressMessage>
) : null}
@ -54,7 +68,12 @@ export class LogTextStreamLoadingItemView extends React.PureComponent<
} else if (isLoading) {
return (
<ProgressEntry alignment={alignment} className={className} color="subdued" isLoading={true}>
<ProgressMessage>Loading additional entries</ProgressMessage>
<ProgressMessage>
<FormattedMessage
id="xpack.infra.logs.loadingAdditionalEntriesText"
defaultMessage="Loading additional entries"
/>
</ProgressMessage>
</ProgressEntry>
);
} else if (!hasMore) {
@ -65,10 +84,18 @@ export class LogTextStreamLoadingItemView extends React.PureComponent<
color="subdued"
isLoading={false}
>
<ProgressMessage>No additional entries found</ProgressMessage>
<ProgressMessage>
<FormattedMessage
id="xpack.infra.logs.noAdditionalEntriesFoundText"
defaultMessage="No additional entries found"
/>
</ProgressMessage>
{onLoadMore ? (
<EuiButtonEmpty size="xs" onClick={onLoadMore} iconType="refresh">
Load again
<FormattedMessage
id="xpack.infra.logs.loadAgainButtonLabel"
defaultMessage="Load again"
/>
</EuiButtonEmpty>
) : null}
</ProgressEntry>

21
x-pack/plugins/infra/public/components/logging/log_text_wrap_controls.tsx
View file

@ -5,6 +5,7 @@
*/
import { EuiFormRow, EuiSwitch } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import * as React from 'react';
interface LogTextWrapControlsProps {
@ -21,8 +22,24 @@ export class LogTextWrapControls extends React.PureComponent<LogTextWrapControls
const { wrap } = this.props;
return (
<EuiFormRow label="Line Wrapping">
<EuiSwitch label="Wrap long lines" checked={wrap} onChange={this.toggleWrap} />
<EuiFormRow
label={
<FormattedMessage
id="xpack.infra.logs.customizeLogs.lineWrappingFormRowLabel"
defaultMessage="Line Wrapping"
/>
}
>
<EuiSwitch
label={
<FormattedMessage
id="xpack.infra.logs.customizeLogs.wrapLongLinesSwitchLabel"
defaultMessage="Wrap long lines"
/>
}
checked={wrap}
onChange={this.toggleWrap}
/>
</EuiFormRow>
);
}

11
x-pack/plugins/infra/public/components/logging/log_time_controls.tsx
View file

@ -5,6 +5,7 @@
*/
import { EuiDatePicker, EuiFilterButton, EuiFilterGroup } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import moment, { Moment } from 'moment';
import React from 'react';
import styled from 'styled-components';
@ -37,7 +38,10 @@ export class LogTimeControls extends React.PureComponent<LogTimeControlsProps> {
iconSide="left"
onClick={this.stopLiveStreaming}
>
Stop streaming
<FormattedMessage
id="xpack.infra.logs.stopStreamingButtonLabel"
defaultMessage="Stop streaming"
/>
</EuiFilterButton>
</EuiFilterGroup>
);
@ -57,7 +61,10 @@ export class LogTimeControls extends React.PureComponent<LogTimeControlsProps> {
/>
</InlineWrapper>
<EuiFilterButton iconType="play" iconSide="left" onClick={this.startLiveStreaming}>
Stream live
<FormattedMessage
id="xpack.infra.logs.startStreamingButtonLabel"
defaultMessage="Stream live"
/>
</EuiFilterButton>
</EuiFilterGroup>
);