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:
parent
205f7690a4
commit
8c0560fcc1
|
@ -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);
|
||||
|
|
|
@ -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));
|
||||
|
|
Loading…
Reference in New Issue