Add i18n strings to validations components

Change-Id: Id37e185120ca737e50a8f34644d664602259bc8e
Closes-Bug: #1650567
Implements: blueprint tripleo-ui-i18n-support-for-js
This commit is contained in:
Florian Fuchs 2017-01-11 15:23:34 +01:00
parent 205f7690a4
commit 8c0560fcc1
2 changed files with 78 additions and 14 deletions

View File

@ -1,3 +1,4 @@
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import React from 'react';
import { includes } from 'lodash';
@ -5,7 +6,34 @@ import { includes } from 'lodash';
import Modal from '../ui/Modal';
import { ValidationStatusIcon } from './ValidationStatusIcon';
export default class ValidationDetail extends React.Component {
const messages = defineMessages({
close: {
id: 'ValidationDetail.close',
defaultMessage: 'Close'
},
description: {
id: 'ValidationDetail.description',
defaultMessage: 'Description:'
},
groups: {
id: 'ValidationDetail.groups',
defaultMessage: 'Groups:'
},
output: {
id: 'ValidationDetail.output',
defaultMessage: 'Output:'
},
status: {
id: 'ValidationDetail.status',
defaultMessage: 'Status:'
},
validationDetail: {
id: 'ValidationDetail.validationDetail',
defaultMessage: 'Validation Detail'
}
});
class ValidationDetail extends React.Component {
constructor() {
super();
this.state = { isPending: false };
@ -50,7 +78,7 @@ export default class ValidationDetail extends React.Component {
if (lastResult && !includes(['running', 'paused'], this.props.status)) {
return (
<div>
<p><strong>Output:</strong></p>
<p><strong><FormattedMessage {...messages.output}/></strong></p>
<pre>{lastResult.output.get('stdout', lastResult.output.get('result'))}</pre>
</div>
);
@ -63,11 +91,11 @@ export default class ValidationDetail extends React.Component {
<div className="modal-header">
<button type="button"
className="close"
aria-label="Close"
aria-label={this.props.intl.formatMessage(messages.close)}
onClick={this.props.hideValidationDetail}>
<span aria-hidden="true" className="pficon pficon-close"/>
</button>
<h4 className="modal-title">Validation Detail</h4>
<h4 className="modal-title"><FormattedMessage {...messages.validationDetail}/></h4>
</div>
<div className="modal-body">
<div className="validation-detail-title">
@ -78,9 +106,14 @@ export default class ValidationDetail extends React.Component {
</div>
<h3>{this.props.name}</h3>
</div>
<p><strong>Description:</strong> <br/>{this.props.description}</p>
<p><strong>Groups:</strong> {this.renderValidationGroups()}</p>
<p><strong>Status:</strong> {this.props.status}</p>
<p>
<strong><FormattedMessage {...messages.description}/></strong> <br/>
{this.props.description}
</p>
<p>
<strong><FormattedMessage {...messages.groups}/></strong> {this.renderValidationGroups()}
</p>
<p><strong><FormattedMessage {...messages.status}/></strong> {this.props.status}</p>
{this.renderValidationOutput()}
</div>
</Modal>
@ -92,9 +125,12 @@ ValidationDetail.propTypes = {
description: React.PropTypes.string,
groups: ImmutablePropTypes.list.isRequired,
hideValidationDetail: React.PropTypes.func,
intl: React.PropTypes.object,
name: React.PropTypes.string.isRequired,
results: ImmutablePropTypes.map.isRequired,
runValidation: React.PropTypes.func.isRequired,
status: React.PropTypes.string.isRequired,
stopValidation: React.PropTypes.func.isRequired
};
export default injectIntl(ValidationDetail);

View File

@ -1,4 +1,5 @@
import { connect } from 'react-redux';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import React from 'react';
@ -10,6 +11,29 @@ import ValidationDetail from './ValidationDetail';
import WorkflowExecutionsActions from '../../actions/WorkflowExecutionsActions';
import { getValidationsWithResults } from '../../selectors/validations';
const messages = defineMessages({
loadingValidations: {
id: 'ValidationsList.loadingValidations',
defaultMessage: 'Loading Validations...'
},
noValidations: {
id: 'ValidationsList.noValidations',
defaultMessage: 'No Validations'
},
noValidationsMessage: {
id: 'ValidationsList.noValidationsMessage',
defaultMessage: 'There are no validations at this time.'
},
refresh: {
id: 'ValidationsList.refresh',
defaultMessage: 'Refresh'
},
validations: {
id: 'ValidationsList.validations',
defaultMessage: 'Validations'
}
});
class ValidationsList extends React.Component {
constructor() {
super();
@ -59,8 +83,8 @@ class ValidationsList extends React.Component {
if (validations.isEmpty()) {
return (
<BlankSlate iconClass="pficon pficon-flag"
title="No Validations">
<p>There are no validations at this time.</p>
title={this.props.intl.formatMessage(messages.noValidations)}>
<p><FormattedMessage {...messages.noValidationsMessage}/></p>
</BlankSlate>
);
} else {
@ -83,6 +107,8 @@ class ValidationsList extends React.Component {
}
render () {
const { formatMessage } = this.props.intl;
return (
<div className="col-sm-12 col-lg-3 sidebar-pf sidebar-pf-right fixed-container validations">
<div className="sidebar-header
@ -92,18 +118,19 @@ class ValidationsList extends React.Component {
<div className="actions pull-right">
<Loader loaded={!(this.props.validationsLoaded &&
this.props.isFetchingValidations)}
content="Loading Validations..."
content={formatMessage(messages.loadingValidations)}
inline>
<a className="link refresh"
onClick={this.refreshValidations.bind(this)}>
<span className="pficon pficon-refresh"></span> Refresh
<span className="pficon pficon-refresh"></span> <FormattedMessage
{...messages.refresh}/>
</a>
</Loader>
</div>
<h2 className="h4">Validations</h2>
<h2 className="h4"><FormattedMessage {...messages.validations}/></h2>
</div>
<Loader loaded={this.props.validationsLoaded && this.props.executionsLoaded}
content="Loading Validations..."
content={formatMessage(messages.loadingValidations)}
componentProps={{ className: 'row fixed-container-body'}}
height={80}>
<div className="list-group list-view-pf validation-list">
@ -121,6 +148,7 @@ ValidationsList.propTypes = {
executionsLoaded: React.PropTypes.bool.isRequired,
fetchValidations: React.PropTypes.func.isRequired,
fetchWorkflowExecutions: React.PropTypes.func.isRequired,
intl: React.PropTypes.object,
isFetchingValidations: React.PropTypes.bool.isRequired,
runValidation: React.PropTypes.func.isRequired,
stopValidation: React.PropTypes.func.isRequired,
@ -154,4 +182,4 @@ const mapStateToProps = state => {
};
};
export default connect(mapStateToProps, mapDispatchToProps)(ValidationsList);
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(ValidationsList));