openstack
/
fuel-ui
Code Issues Proposed changes

Upgrade React to 0.12.1 

Change-Id: I6ef26f028c9c932d8831a78b522c54c00f33bf44
This commit is contained in:
Vitaly Kramskikh 2014-10-24 17:07:16 +07:00 committed by Julia Aranovich
parent 8a564cfe4f
commit cef83271cd
16 changed files with 384 additions and 373 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bower.json
View File

@ -3,7 +3,7 @@
"dependencies": {
"jquery": "1.9.1",
"jquery-cookie": "1.4.1",
"react": "0.11.2",
"react": "0.12.1",
"react.backbone": "0.4.0",
"requirejs": "2.1.15",
"requirejs-plugins": "1.0.2",

562
npm-shrinkwrap.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -19,7 +19,7 @@
"grunt-jison": "~1.2.1",
"grunt-jscs": "~0.7.1",
"grunt-lintspaces": "~0.6.0",
"grunt-react": "~0.9.0",
"grunt-react": "~0.10.0",
"grunt-text-replace": "~0.3.12",
"jison": "~0.4.13",
"jshint-stylish": "~0.4.0",

8
static/js/app.js
View File

@ -155,7 +155,7 @@ function(React, utils, layoutComponents, Coccyx, coccyxMixins, models, KeystoneC
},
renderLayout: function() {
this.content = $('#content');
this.navbar = React.renderComponent(new layoutComponents.Navbar({
this.navbar = React.render(React.createElement(layoutComponents.Navbar, {
elements: [
{label: 'environments', url: '#clusters'},
{label: 'releases', url: '#releases'},
@ -166,8 +166,8 @@ function(React, utils, layoutComponents, Coccyx, coccyxMixins, models, KeystoneC
statistics: new models.NodesStatistics(),
notifications: new models.Notifications()
}), $('#navbar')[0]);
this.breadcrumbs = React.renderComponent(new layoutComponents.Breadcrumbs(), $('#breadcrumbs')[0]);
this.footer = React.renderComponent(new layoutComponents.Footer({version: this.version}), $('#footer')[0]);
this.breadcrumbs = React.render(React.createElement(layoutComponents.Breadcrumbs), $('#breadcrumbs')[0]);
this.footer = React.render(React.createElement(layoutComponents.Footer, {version: this.version}), $('#footer')[0]);
this.content.find('.loading').addClass('layout-loaded');
},
updateTitle: function() {
@ -184,7 +184,7 @@ function(React, utils, layoutComponents, Coccyx, coccyxMixins, models, KeystoneC
if (this.page) {
utils.universalUnmount(this.page);
}
this.page = utils.universalMount(new NewPage(options), this.content);
this.page = utils.universalMount(NewPage, options, this.content);
this.navbar.setActive(_.result(this.page, 'navbarActiveElement'));
this.updateTitle();
this.toggleElements(!this.page.hiddenLayout);

2
static/js/component_mixins.jsx
View File

@ -46,7 +46,7 @@ define(['jquery', 'underscore', 'react', 'utils'], function($, _, React, utils)
},
dialogMixin: {
propTypes: {
modalClass: React.PropTypes.renderable
modalClass: React.PropTypes.node
},
getInitialState: function() {
return {

3
static/js/libs/custom/jsx.js
View File

@ -35,9 +35,6 @@ define(['JSXTransformer', 'text'], function (JSXTransformer, text) {
var onLoad = function(content) {
try {
if (-1 === content.indexOf('@jsx React.DOM')) {
content = "/** @jsx React.DOM */" + content;
}
content = JSXTransformer.transform(content).code;
} catch (err) {
onLoadNative.error(err);

11
static/js/utils.js
View File

@ -78,8 +78,9 @@ define(['require', 'expression', 'expression/objects', 'react'], function(requir
}
return result;
},
universalMount: function(view, el, parentView) {
if (view instanceof Backbone.View) {
universalMount: function(ViewConstructor, options, el, parentView) {
if (ViewConstructor.prototype instanceof Backbone.View) {
var view = new ViewConstructor(options);
view.render();
if (el) {
$(el).html(view.el);
@ -90,7 +91,7 @@ define(['require', 'expression', 'expression/objects', 'react'], function(requir
return view;
} else {
var node = $(el)[0];
var mountedComponent = React.renderComponent(view, node);
var mountedComponent = React.render(React.createElement(ViewConstructor, options), node);
// FIXME(vkramskikh): we need to store node to which
// we mounted the component since it is not always
// possible to determine the node: if render() returns
@ -106,8 +107,8 @@ define(['require', 'expression', 'expression/objects', 'react'], function(requir
React.unmountComponentAtNode(view._mountNode || view.getDOMNode().parentNode);
}
},
showDialog: function(dialog) {
return React.renderComponent(dialog, $('#modal-container')[0]);
showDialog: function(Dialog, options) {
return React.render(React.createElement(Dialog, options), $('#modal-container')[0]);
},
showErrorDialog: function(options, parentView) {
parentView = parentView || app.page;

11
static/js/views/cluster_page.js
View File

@ -143,10 +143,10 @@ function(React, utils, models, commonViews, clusterPageSubviews, dialogViews, No
activeTab: this.activeTab
})).i18n();
var options = {model: this.model, page: this};
this.clusterInfo = utils.universalMount(new clusterPageSubviews.ClusterInfo(options), this.$('.cluster-info'), this);
this.clusterCustomizationMessage = utils.universalMount(new clusterPageSubviews.ClusterCustomizationMessage(options), this.$('.customization-message'), this);
this.deploymentResult = utils.universalMount(new clusterPageSubviews.DeploymentResult(options), this.$('.deployment-result'), this);
this.deploymentControl = utils.universalMount(new clusterPageSubviews.DeploymentControl(options), this.$('.deployment-control'), this);
this.clusterInfo = utils.universalMount(clusterPageSubviews.ClusterInfo, options, this.$('.cluster-info'), this);
this.clusterCustomizationMessage = utils.universalMount(clusterPageSubviews.ClusterCustomizationMessage, options, this.$('.customization-message'), this);
this.deploymentResult = utils.universalMount(clusterPageSubviews.DeploymentResult, options, this.$('.deployment-result'), this);
this.deploymentControl = utils.universalMount(clusterPageSubviews.DeploymentControl, options, this.$('.deployment-control'), this);
var tabs = {
nodes: NodesTab,
@ -158,7 +158,8 @@ function(React, utils, models, commonViews, clusterPageSubviews, dialogViews, No
};
if (_.has(tabs, this.activeTab)) {
this.tab = utils.universalMount(
new tabs[this.activeTab]({model: this.model, tabOptions: this.tabOptions, page: this}),
tabs[this.activeTab],
{model: this.model, tabOptions: this.tabOptions, page: this},
this.$('#tab-' + this.activeTab),
this
);

2
static/js/views/cluster_page_subviews.jsx
View File

@ -104,7 +104,7 @@ function(React, utils, dialogs) {
})
],
showDialog: function(Constructor) {
utils.showDialog(Constructor({cluster: this.props.model}));
utils.showDialog(Constructor, {cluster: this.props.model});
},
onDeployRequest: function() {
var page = this.props.page;

2
static/js/views/cluster_page_tabs/actions_tab.jsx
View File

@ -190,7 +190,7 @@ function(React, utils, models, dialogs) {
var DeleteEnvironmentAction = React.createClass({
applyAction: function(e) {
e.preventDefault();
utils.showDialog(dialogs.RemoveClusterDialog({cluster: this.props.cluster}));
utils.showDialog(dialogs.RemoveClusterDialog, {cluster: this.props.cluster});
},
render: function() {
return (

8
static/js/views/cluster_page_tabs/logs_tab.jsx
View File

@ -302,7 +302,7 @@ function(React, utils, models, componentMixins, controls) {
value={this.state.chosenType}
wrapperClassName='filter-bar-item log-type-filter'
name='type'
className='filter-bar-dropdown input-medium'
inputClassName='filter-bar-dropdown input-medium'
onChange={this.onTypeChange}
children={typeOptions}
/>;
@ -318,7 +318,7 @@ function(React, utils, models, componentMixins, controls) {
value={this.state.chosenNodeId}
wrapperClassName='filter-bar-item log-node-filter'
name='node'
className='filter-bar-dropdown input-large'
inputClassName='filter-bar-dropdown input-large'
onChange={this.onNodeChange}
children={nodeOptions}
/>);
@ -332,7 +332,7 @@ function(React, utils, models, componentMixins, controls) {
value={this.state.chosenSourceId}
wrapperClassName='filter-bar-item log-source-filter'
name='source'
className='filter-bar-dropdown input-medium'
inputClassName='filter-bar-dropdown input-medium'
onChange={this.onSourceChange}
disabled={!this.state.chosenSourceId}
children={sourceOptions}
@ -352,7 +352,7 @@ function(React, utils, models, componentMixins, controls) {
value={this.state.chosenLevelId}
wrapperClassName='filter-bar-item log-level-filter'
name='level'
className='filter-bar-dropdown input-medium'
inputClassName='filter-bar-dropdown input-medium'
onChange={this.onLevelChange}
disabled={!this.state.chosenLevelId}
children={levelOptions}

2
static/js/views/cluster_page_tabs/nodes_tab_screens/node_list_screen.js
View File

@ -173,7 +173,7 @@ function(utils, models, dialogs, panels, Screen, nodesManagementPanelTemplate, n
if (this.roles) {
utils.universalUnmount(this.roles);
}
this.roles = utils.universalMount(new panels.RolesPanel({cluster: this.model, nodes: this.nodes}), this.$('.roles-panel'), this);
this.roles = utils.universalMount(panels.RolesPanel, {cluster: this.model, nodes: this.nodes}, this.$('.roles-panel'), this);
}
this.nodeList = new NodeList(options);
this.registerSubView(this.nodeList);

54
static/js/views/cluster_page_tabs/settings_tab.jsx
View File

@ -206,14 +206,12 @@ function(React, utils, models, Expression, controls) {
{_.map(sortedSettingGroups, function(groupName) {
var path = groupName + '.metadata';
if (!this.checkRestrictions('hide', path)) {
return this.transferPropsTo(
<SettingGroup
key={groupName}
groupName={groupName}
onChange={_.bind(this.onChange, this, groupName)}
disabled={locked || (!!this.settings.get(path).toggleable && this.processRestrictions(path))}
/>
);
return <SettingGroup {...this.props}
key={groupName}
groupName={groupName}
onChange={_.bind(this.onChange, this, groupName)}
disabled={locked || (!!this.settings.get(path).toggleable && this.processRestrictions(path))}
/>;
}
}, this)}
<div className='row'>
@ -291,32 +289,28 @@ function(React, utils, models, Expression, controls) {
}, this)
.compact()
.value();
if (setting.type == 'radio') return this.transferPropsTo(
<controls.RadioGroup
key={settingName}
name={settingName}
label={setting.label}
values={values}
error={error}
/>
);
}
return this.transferPropsTo(
<controls.Input
if (setting.type == 'radio') return <controls.RadioGroup {...this.props}
key={settingName}
type={setting.type}
name={settingName}
value={setting.value}
checked={_.isBoolean(setting.value) ? setting.value : false}
label={setting.label}
description={setting.description}
children={setting.type == 'select' && this.composeOptions(setting.values)}
toggleable={setting.type == 'password'}
values={values}
error={error}
disabled={this.props.disabled || disabled}
wrapperClassName='tablerow-wrapper'
/>
);
/>;
}
return <controls.Input {...this.props}
key={settingName}
type={setting.type}
name={settingName}
children={setting.type == 'select' && this.composeOptions(setting.values)}
value={setting.value}
checked={_.isBoolean(setting.value) ? setting.value : false}
label={setting.label}
description={setting.description}
toggleable={setting.type == 'password'}
error={error}
disabled={this.props.disabled || disabled}
wrapperClassName='tablerow-wrapper'
/>;
}
}, this)}
</div>

84
static/js/views/controls.jsx
View File

@ -48,15 +48,15 @@ define(['jquery', 'underscore', 'react'], function($, _, React) {
propTypes: {
type: React.PropTypes.string.isRequired,
name: React.PropTypes.string,
label: React.PropTypes.renderable,
description: React.PropTypes.renderable,
label: React.PropTypes.node,
description: React.PropTypes.node,
disabled: React.PropTypes.bool,
wrapperClassName: React.PropTypes.renderable,
labelClassName: React.PropTypes.renderable,
descriptionClassName: React.PropTypes.renderable,
labelWrapperClassName: React.PropTypes.renderable,
inputClassName: React.PropTypes.renderable,
tooltipText: React.PropTypes.renderable,
inputClassName: React.PropTypes.node,
labelClassName: React.PropTypes.node,
labelWrapperClassName: React.PropTypes.node,
descriptionClassName: React.PropTypes.node,
wrapperClassName: React.PropTypes.node,
tooltipText: React.PropTypes.node,
toggleable: React.PropTypes.bool,
labelBeforeControl: React.PropTypes.bool,
onChange: React.PropTypes.func
@ -78,32 +78,26 @@ define(['jquery', 'underscore', 'react'], function($, _, React) {
}
},
renderInput: function() {
var input = null,
classes = {
'parameter-input': true,
'input-append': this.props.toggleable
};
var classes = {
'parameter-input': true,
'input-append': this.props.toggleable
};
classes[this.props.inputClassName] = this.props.inputClassName;
switch (this.props.type) {
case 'select':
input = (<select ref='input' key='input' className={cx(classes)} onChange={this.onChange}>{this.props.children}</select>);
break;
case 'textarea':
input = <textarea ref='input' key='input' className={cx(classes)} onChange={this.onChange} />;
break;
case 'password':
var type = (this.props.toggleable && this.state.visible) ? 'text' : 'password';
input = <input ref='input' key='input' className={cx(classes)} type={type} onChange={this.onChange} />;
break;
default:
input = <input ref='input' key='input' className={cx(classes)} onChange={this.onChange} value={this.props.value} />;
}
var props = {
ref: 'input',
key: 'input',
type: (this.props.toggleable && this.state.visible) ? 'text' : this.props.type,
className: cx(classes),
onChange: this.onChange
},
Tag = _.contains(['select', 'textarea'], this.props.type) ? this.props.type : 'input',
input = (<Tag {...this.props} {...props}>{this.props.children}</Tag>);
return this.isCheckboxOrRadio() ? (
<div key='input-wrapper' className='custom-tumbler'>
{this.transferPropsTo(input)}
{input}
<span>&nbsp;</span>
</div>
) : this.transferPropsTo(input);
) : input;
},
renderToggleablePasswordAddon: function() {
return this.props.toggleable ? (
@ -177,9 +171,9 @@ define(['jquery', 'underscore', 'react'], function($, _, React) {
propTypes: {
name: React.PropTypes.string,
values: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
label: React.PropTypes.renderable,
labelClassName: React.PropTypes.renderable,
tooltipText: React.PropTypes.renderable
label: React.PropTypes.node,
labelClassName: React.PropTypes.node,
tooltipText: React.PropTypes.node
},
render: function() {
var labelClasses = {'parameter-name': true};
@ -194,19 +188,17 @@ define(['jquery', 'underscore', 'react'], function($, _, React) {
</label>
}
{_.map(this.props.values, function(value) {
return this.transferPropsTo(
<controls.Input
key={value.data}
type='radio'
value={value.data}
defaultChecked={value.defaultChecked}
checked={value.checked}
label={value.label}
description={value.description}
disabled={value.disabled}
tooltipText={value.tooltipText}
/>
);
return <controls.Input {...this.props}
key={value.data}
type='radio'
value={value.data}
defaultChecked={value.defaultChecked}
checked={value.checked}
label={value.label}
description={value.description}
disabled={value.disabled}
tooltipText={value.tooltipText}
/>;
}, this)}
</div>
);
@ -227,7 +219,7 @@ define(['jquery', 'underscore', 'react'], function($, _, React) {
controls.Table = React.createClass({
propTypes: {
tableClassName: React.PropTypes.renderable,
tableClassName: React.PropTypes.node,
head: React.PropTypes.array,
body: React.PropTypes.array
},

2
static/js/views/layout.jsx
View File

@ -36,7 +36,7 @@ function(React, utils, models, componentMixins, dialogs) {
],
showChangePasswordDialog: function(e) {
e.preventDefault();
utils.showDialog(dialogs.ChangePasswordDialog());
utils.showDialog(dialogs.ChangePasswordDialog);
},
togglePopover: function(visible) {
this.setState({popoverVisible: _.isBoolean(visible) ? visible : !this.state.popoverVisible});

2
static/js/views/notifications_page.jsx
View File

@ -38,7 +38,7 @@ function(React, utils, models, dialogs) {
<h3 className='page-title'>{$.t('notifications_page.title')}</h3>
<ul className='notification-list page-wrapper'>
{this.props.notifications.map(function(notification) {
return this.transferPropsTo(<Notification key={'notification' + notification.id} notification={notification} />);
return <Notification {...this.props} key={'notification' + notification.id} notification={notification} />;
}, this)}
</ul>
</div>