openstack
/
fuel-ui
Code Issues Proposed changes

Merge "Refactoring of Dashboard layout"

This commit is contained in:
Jenkins 2016-06-06 13:21:26 +00:00 committed by Gerrit Code Review
parent 80e9e7448f 279ba7f650
commit 62ea07e75e
3 changed files with 112 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
static/styles/main.less
View File

@ -4751,9 +4751,14 @@ input[type=range] {
background-color: @base-light-color;
width: @page-width;
margin: 0 0 @dashboard-offset -@dashboard-offset * 2;
padding: @dashboard-offset @dashboard-offset * 2;
padding: @dashboard-offset @dashboard-offset * 2 @dashboard-offset * 2;
.title {
padding: 0;
}
.go-to-healthcheck {
margin-bottom: @dashboard-offset;
margin-bottom: @dashboard-offset * 2;
}
.cluster-info-value, .cluster-info-title {
height: auto;
@ -4767,6 +4772,7 @@ input[type=range] {
&.cluster-info-value {
&.name {
.btn-link {
height: 30px;
padding: 0;
border: none;
text-align: left;
@ -4775,7 +4781,6 @@ input[type=range] {
overflow: hidden;
cursor: pointer;
text-overflow: ellipsis;
line-height: 19px;
}
.glyphicon {
margin-left: 10px;
@ -4785,60 +4790,31 @@ input[type=range] {
}
}
}
.rename-block {
height: 30px;
line-height: 13px;
margin-bottom: 4px;
text-align: left;
&.has-error {
height: auto;
.text-danger {
.form-group {
margin: 0;
left: -13px;
input[type=text] {
height: 30px;
margin: 0;
}
.help-block {
font-size: 12px;
width: 215px;
padding-top: 30px;
margin-bottom: 10px;
margin-bottom: 0;
}
}
input[type=text] {
width: 240px;
height: 32px;
margin: -21px 0 0 -12px;
float: left;
}
}
.capacity-block {
margin-bottom: 15px;
.capacity-items {
margin-top: -9px;
> div {
cursor: default;
background-color: @white;
padding: 4px 10px;
&.cpu {
border: 1px solid @dashboard-gray;
}
&.hdd {
border: 1px solid @dashboard-gray;
}
&.ram {
border-top: 1px solid @dashboard-gray;
border-bottom: 1px solid @dashboard-gray;
}
.capacity-value {
.font-semibold;
float: right;
}
&:not(.has-error) .help-block {
display: none;
}
}
}
.statistics-block {
margin-bottom: 15px;
.cluster-info-title {
margin-bottom: @dashboard-offset;
}
.cluster-info-value.name, .rename-block .form-group {
position: relative;
top: -6px;
}
.dashboard-actions-wrapper {
margin: @dashboard-offset 0 @dashboard-offset 0;
margin: 0;
.reset-environment {
margin-right: 87px;
}
@ -4849,6 +4825,43 @@ input[type=range] {
vertical-align: sub;
}
}
.statistics {
.title {
padding-left: 15px;
}
.capacity-block {
margin-bottom: 15px;
.capacity-items {
> div {
background-color: @white;
padding: 4px 10px;
&.cpu {
border: 1px solid @dashboard-gray;
}
&.hdd {
border: 1px solid @dashboard-gray;
}
&.ram {
border-top: 1px solid @dashboard-gray;
border-bottom: 1px solid @dashboard-gray;
}
.capacity-value {
.font-semibold;
float: right;
}
}
}
}
.statistics-block {
.btn-add-nodes {
padding: 0;
}
}
.cluster-info-title {
margin-bottom: @dashboard-offset;
}
}
}
@dashboard-border-color: #d3d3d3;

4
static/tests/functional/test_cluster_dashboard.js
View File

@ -69,12 +69,12 @@ registerSuite(() => {
.then(() => clusterPage.goToTab('Dashboard'))
.then(() => dashboardPage.setClusterName(initialName))
.assertElementAppears(
'.rename-block.has-error',
'.rename-block .has-error',
1000,
'Error style for duplicate name is applied'
)
.assertElementTextEquals(
'.rename-block .text-danger',
'.rename-block .help-block',
'Environment with this name already exists',
'Duplicate name error text appears'
)

104
static/views/cluster_page_tabs/dashboard_tab.js
View File

@ -819,7 +819,13 @@ var ClusterActionsPanel = React.createClass({
<div className='instruction'>
{i18n(ns + 'no_nodes_instruction')}
</div>
<AddNodesButton cluster={cluster} />
<a
className='btn btn-success btn-add-nodes'
href={'#cluster/' + cluster.id + '/nodes/add'}
>
<i className='glyphicon glyphicon-plus-white' />
{i18n(ns + 'go_to_nodes')}
</a>
</div>
</div>
</div>
@ -984,7 +990,7 @@ var ClusterInfo = React.createClass({
_.map(['status', 'openstack_release', 'compute', 'network', 'storage_backends'], (field) => {
var value = this.getClusterValue(field);
return (
<div key={field}>
<div className='row' key={field}>
<div className='col-xs-6'>
<div className='cluster-info-title'>
{i18n(ns + 'cluster_info_fields.' + field)}
@ -1094,7 +1100,16 @@ var ClusterInfo = React.createClass({
<div className='col-xs-6' key='roles'>
{this.renderLegend(roles, true)}
{!cluster.task({group: 'deployment', active: true}) &&
<AddNodesButton cluster={cluster} />
<div className='row'>
<div className='col-xs-12'>
<a
className='btn btn-link btn-add-nodes'
href={'#cluster/' + cluster.id + '/nodes/add'}
>
{i18n(ns + 'go_to_nodes')}
</a>
</div>
</div>
}
</div>,
<div className='col-xs-6' key='statuses'>
@ -1115,8 +1130,8 @@ var ClusterInfo = React.createClass({
<div className='cluster-information'>
<div className='row'>
<div className='col-xs-6'>
<div className='title'>{i18n(ns + 'summary')}</div>
<div className='row'>
<div className='title'>{i18n(ns + 'summary')}</div>
<div className='col-xs-6'>
<div className='cluster-info-title'>
{i18n(ns + 'cluster_info_fields.name')}
@ -1138,25 +1153,25 @@ var ClusterInfo = React.createClass({
</div>
}
</div>
{this.renderClusterInfoFields()}
{(cluster.get('status') === 'operational') &&
<div className='col-xs-12 go-to-healthcheck'>
{i18n(ns + 'healthcheck')}
<a href={'#cluster/' + cluster.id + '/healthcheck'}>
{i18n(ns + 'healthcheck_tab')}
</a>
</div>
}
<div className='col-xs-12 dashboard-actions-wrapper'>
<DeleteEnvironmentAction cluster={cluster} />
<ResetEnvironmentAction
cluster={cluster}
task={cluster.task({group: 'deployment', active: true})}
/>
</div>
{this.renderClusterInfoFields()}
{(cluster.get('status') === 'operational') &&
<div className='go-to-healthcheck'>
{i18n(ns + 'healthcheck')}
<a href={'#cluster/' + cluster.id + '/healthcheck'}>
{i18n(ns + 'healthcheck_tab')}
</a>
</div>
}
<div className='row dashboard-actions-wrapper'>
<DeleteEnvironmentAction cluster={cluster} />
<ResetEnvironmentAction
cluster={cluster}
task={cluster.task({group: 'deployment', active: true})}
/>
</div>
</div>
<div className='col-xs-6'>
<div className='col-xs-6 statistics'>
{this.renderClusterCapacity()}
{this.renderStatistics()}
</div>
@ -1166,20 +1181,6 @@ var ClusterInfo = React.createClass({
}
});
var AddNodesButton = React.createClass({
render() {
return (
<a
className='btn btn-success btn-add-nodes'
href={'#cluster/' + this.props.cluster.id + '/nodes/add'}
>
<i className='glyphicon glyphicon-plus-white' />
{i18n(ns + 'go_to_nodes')}
</a>
);
}
});
var RenameEnvironmentAction = React.createClass({
applyAction(e) {
e.preventDefault();
@ -1221,13 +1222,13 @@ var RenameEnvironmentAction = React.createClass({
return {
name: this.props.cluster.get('name'),
disabled: false,
error: ''
error: null
};
},
onChange(inputName, newValue) {
this.setState({
name: newValue,
error: ''
error: null
});
},
handleKeyDown(e) {
@ -1241,27 +1242,18 @@ var RenameEnvironmentAction = React.createClass({
}
},
render() {
var classes = {
'rename-block': true,
'has-error': !!this.state.error
};
return (
<div className={utils.classNames(classes)}>
<div onKeyDown={this.handleKeyDown}>
<Input
type='text'
disabled={this.state.disabled}
className={utils.classNames({'form-control': true, error: this.state.error})}
maxLength='50'
onChange={this.onChange}
defaultValue={this.state.name}
selectOnFocus
autoFocus
/>
{this.state.error &&
<div className='text-danger'>{this.state.error}</div>
}
</div>
<div className='rename-block' onKeyDown={this.handleKeyDown}>
<Input
type='text'
disabled={this.state.disabled}
maxLength='50'
onChange={this.onChange}
defaultValue={this.state.name}
error={this.state.error}
selectOnFocus
autoFocus
/>
</div>
);
}