From 624f06031612a1a975a16c3174bb1a4eac3eef6e Mon Sep 17 00:00:00 2001 From: tibmt Date: Tue, 27 Nov 2018 13:11:56 +0200 Subject: [PATCH] translate InfraOps visualization component (Part 3) (#25213) * 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 and directly wrap some classes by injectI18n() * update Infra-III - add static to displayName --- .../infra/public/components/header.tsx | 44 ++++++---- .../logging/log_customization_menu.tsx | 6 +- .../logging/log_minimap/search_marker.tsx | 9 +- .../logging/log_minimap_scale_controls.tsx | 10 ++- .../log_search_buttons.tsx | 8 +- .../log_search_controls/log_search_input.tsx | 83 +++++++++++-------- .../logging/log_text_scale_controls.tsx | 10 ++- .../logging/log_text_stream/empty_view.tsx | 24 +++++- .../log_text_stream/loading_item_view.tsx | 39 +++++++-- .../logging/log_text_wrap_controls.tsx | 21 ++++- .../components/logging/log_time_controls.tsx | 11 ++- 11 files changed, 192 insertions(+), 73 deletions(-) diff --git a/x-pack/plugins/infra/public/components/header.tsx b/x-pack/plugins/infra/public/components/header.tsx index 38c71741ab4b9..8029ee9248fa8 100644 --- a/x-pack/plugins/infra/public/components/header.tsx +++ b/x-pack/plugins/infra/public/components/header.tsx @@ -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 { - private staticBreadcrumbs = [ - { - href: '#/', - text: 'Infrastructure', - }, - ]; +export const Header = injectI18n( + class extends React.PureComponent { + 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 ( - - - - - {appendSections} - - ); + return ( + + + + + {appendSections} + + ); + } } -} +); const HeaderWrapper = styled(EuiHeader)` height: 29px; diff --git a/x-pack/plugins/infra/public/components/logging/log_customization_menu.tsx b/x-pack/plugins/infra/public/components/logging/log_customization_menu.tsx index 2e444460fff9e..0882a4c195455 100644 --- a/x-pack/plugins/infra/public/components/logging/log_customization_menu.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_customization_menu.tsx @@ -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 = ( - Customize + ); diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/search_marker.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/search_marker.tsx index 70cfc5ddac799..df383cf07459c 100644 --- a/x-pack/plugins/infra/public/components/logging/log_minimap/search_marker.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_minimap/search_marker.tsx @@ -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 {hoveredPosition ? ( - {bucket.count} {bucket.count === 1 ? 'search result' : 'search results'} + ) : null} + + } + > ({ id: getIntervalSizeDescriptorKey(sizeDescriptor), diff --git a/x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_buttons.tsx b/x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_buttons.tsx index 5c24a36fac669..edbd111f39d2b 100644 --- a/x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_buttons.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_buttons.tsx @@ -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 - Previous + @@ -62,7 +66,7 @@ export class LogSearchButtons extends React.PureComponent - Next + diff --git a/x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_input.tsx b/x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_input.tsx index 95f4b7bdfc65b..1b157ff65fc67 100644 --- a/x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_input.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_input.tsx @@ -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 { - public readonly state = { - query: '', - }; +export const LogSearchInput = injectI18n( + class extends React.PureComponent { + public static displayName = 'LogSearchInput'; + public readonly state = { + query: '', + }; - public handleSubmit: React.FormEventHandler = evt => { - evt.preventDefault(); + public handleSubmit: React.FormEventHandler = 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 = evt => { - this.setState({ - query: evt.target.value, - }); - }; + public handleChangeQuery: React.ChangeEventHandler = 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 ( -
- - - ); + return ( +
+ + + ); + } } -} +); const PlainSearchField = styled(EuiFieldSearch)` background: transparent; diff --git a/x-pack/plugins/infra/public/components/logging/log_text_scale_controls.tsx b/x-pack/plugins/infra/public/components/logging/log_text_scale_controls.tsx index 089142891a36e..f9853777fed31 100644 --- a/x-pack/plugins/infra/public/components/logging/log_text_scale_controls.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_text_scale_controls.tsx @@ -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 + + } + > ({ id: availableTextScale.toString(), diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/empty_view.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/empty_view.tsx index d4f0a51a0bc7c..0eb010b589ed3 100644 --- a/x-pack/plugins/infra/public/components/logging/log_text_stream/empty_view.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/empty_view.tsx @@ -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.PureComponentThere are no log messages to display.} + title={ +

+ +

+ } titleSize="m" - body={

Try adjusting your filter.

} + body={ +

+ +

+ } actions={ - Check for new data + } /> diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx index 6b89004d97f56..a39af89d89f34 100644 --- a/x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx @@ -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 ( - Streaming new entries + + + {lastStreamingUpdate ? ( - last updated{' '} - ago + + + ), + }} + /> ) : null} @@ -54,7 +68,12 @@ export class LogTextStreamLoadingItemView extends React.PureComponent< } else if (isLoading) { return ( - Loading additional entries + + + ); } else if (!hasMore) { @@ -65,10 +84,18 @@ export class LogTextStreamLoadingItemView extends React.PureComponent< color="subdued" isLoading={false} > - No additional entries found + + + {onLoadMore ? ( - Load again + ) : null} diff --git a/x-pack/plugins/infra/public/components/logging/log_text_wrap_controls.tsx b/x-pack/plugins/infra/public/components/logging/log_text_wrap_controls.tsx index 7500780961e74..00bcebffaf601 100644 --- a/x-pack/plugins/infra/public/components/logging/log_text_wrap_controls.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_text_wrap_controls.tsx @@ -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 - + + } + > + + } + checked={wrap} + onChange={this.toggleWrap} + /> ); } diff --git a/x-pack/plugins/infra/public/components/logging/log_time_controls.tsx b/x-pack/plugins/infra/public/components/logging/log_time_controls.tsx index 9d719168bcb39..e84d260888f45 100644 --- a/x-pack/plugins/infra/public/components/logging/log_time_controls.tsx +++ b/x-pack/plugins/infra/public/components/logging/log_time_controls.tsx @@ -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 { iconSide="left" onClick={this.stopLiveStreaming} > - Stop streaming + ); @@ -57,7 +61,10 @@ export class LogTimeControls extends React.PureComponent { /> - Stream live + );