openstack
/
fuel-ui
Code Issues Proposed changes

Force complexity eslint rule 

Implements: blueprint converge-to-eslint-config-openstack

Change-Id: I40f2ed044493e8d35752c57e11d821aacef82e6b
This commit is contained in:
Kate Pimenova 2016-01-19 16:07:08 +03:00 committed by Vitaly Kramskikh
parent b8f4f7701b
commit 446c8838a7
6 changed files with 262 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc
View File

@ -14,7 +14,6 @@
no-sync: 0 # it affects our browser code with Sync in function names, like "onModelSync"
# to be fixed and enabled
complexity: 0
eqeqeq: 0
max-len: [0, 120]

19
static/utils.js
View File

@ -201,17 +201,14 @@ var utils = {
if (_.any(range)) {
var error = {};
if (!utils.validateIP(range[0])) {
error.start = warnings.INVALID_IP;
} else if (cidr && !utils.validateIpCorrespondsToCIDR(cidr, range[0])) {
error.start = warnings.DOES_NOT_MATCH_CIDR;
}
if (!utils.validateIP(range[1])) {
error.end = warnings.INVALID_IP;
} else if (cidr && !utils.validateIpCorrespondsToCIDR(cidr, range[1])) {
error.end = warnings.DOES_NOT_MATCH_CIDR;
}
_.each(range, (ip, ipIndex) => {
var errorKey = !ipIndex ? 'start' : 'end';
if (!utils.validateIP(ip)) {
error[errorKey] = warnings.INVALID_IP;
} else if (cidr && !utils.validateIpCorrespondsToCIDR(cidr, ip)) {
error[errorKey] = warnings.DOES_NOT_MATCH_CIDR;
}
});
if (_.isEmpty(error)) {
if (IP.toLong(range[0]) > IP.toLong(range[1])) {

116
static/views/cluster_page_tabs/network_tab.js
View File

@ -221,6 +221,64 @@ var Range = React.createClass({
</div>
);
},
renderExtendableRanges(options) {
var {error, attributeName, ranges, verificationError} = options;
return _.map(ranges, (range, index) => {
var rangeError = _.findWhere(error, {index: index}) || {};
return (
<div className='range-row clearfix' key={index}>
<Input
{...this.getRangeProps()}
error={(rangeError.start || verificationError) ? '' : null}
value={range[0]}
onChange={_.partialRight(this.onRangeChange, attributeName, index)}
ref={'start' + index}
inputClassName='start'
placeholder={rangeError.start ? '' : this.props.placeholder}
/>
<Input
{...this.getRangeProps(true)}
error={rangeError.end ? '' : null}
value={range[1]}
onChange={_.partialRight(this.onRangeChange, attributeName, index)}
onFocus={_.partial(this.autoCompleteIPRange, rangeError && rangeError.start, range[0])}
disabled={this.props.disabled || !!this.props.autoIncreaseWith}
placeholder={rangeError.end ? '' : this.props.placeholder}
extraContent={!this.props.hiddenControls && this.renderRangeControls(attributeName, index, ranges.length)}
/>
<div className='validation-error text-danger pull-left'>
<span className='help-inline'>
{rangeError.start || rangeError.end}
</span>
</div>
</div>
);
});
},
renderRanges(options) {
var {error, ranges, startInputError, endInputError} = options;
return (
<div className='range-row clearfix'>
<Input
{...this.getRangeProps()}
value={ranges[0]}
error={startInputError ? '' : null}
inputClassName='start'
/>
<Input
{...this.getRangeProps(true)}
disabled={this.props.disabled || !!this.props.autoIncreaseWith}
value={ranges[1]}
error={endInputError ? '' : null}
/>
{error && (startInputError || endInputError) &&
<div className='validation-error text-danger pull-left'>
<span className='help-inline'>{startInputError || endInputError}</span>
</div>
}
</div>
);
},
render() {
var error = this.props.error || null;
var attributeName = this.props.name;
@ -247,58 +305,12 @@ var Range = React.createClass({
}
<div className='col-xs-12'>
<label>{this.props.label}</label>
{this.props.extendable ?
_.map(ranges, (range, index) => {
var rangeError = _.findWhere(error, {index: index}) || {};
return (
<div className='range-row clearfix' key={index}>
<Input
{...this.getRangeProps()}
error={(rangeError.start || verificationError) ? '' : null}
value={range[0]}
onChange={_.partialRight(this.onRangeChange, attributeName, index)}
ref={'start' + index}
inputClassName='start'
placeholder={rangeError.start ? '' : this.props.placeholder}
/>
<Input
{...this.getRangeProps(true)}
error={rangeError.end ? '' : null}
value={range[1]}
onChange={_.partialRight(this.onRangeChange, attributeName, index)}
onFocus={_.partial(this.autoCompleteIPRange, rangeError && rangeError.start, range[0])}
disabled={this.props.disabled || !!this.props.autoIncreaseWith}
placeholder={rangeError.end ? '' : this.props.placeholder}
extraContent={!this.props.hiddenControls && this.renderRangeControls(attributeName, index, ranges.length)}
/>
<div className='validation-error text-danger pull-left'>
<span className='help-inline'>
{rangeError.start || rangeError.end}
</span>
</div>
</div>
);
})
:
<div className='range-row clearfix'>
<Input
{...this.getRangeProps()}
value={ranges[0]}
error={startInputError ? '' : null}
inputClassName='start'
/>
<Input
{...this.getRangeProps(true)}
disabled={this.props.disabled || !!this.props.autoIncreaseWith}
value={ranges[1]}
error={endInputError ? '' : null}
/>
{error && (startInputError || endInputError) &&
<div className='validation-error text-danger pull-left'>
<span className='help-inline'>{startInputError || endInputError}</span>
</div>
}
</div>
{
// TODO: renderExtendableRanges & renderRanges methods should be refactored to avoid copy-paste
this.props.extendable ?
this.renderExtendableRanges({error, attributeName, ranges, verificationError})
:
this.renderRanges({error, ranges, startInputError, endInputError})
}
</div>
</div>

94
static/views/cluster_page_tabs/nodes_tab_screens/node.js
View File

@ -260,48 +260,10 @@ var Node = React.createClass({
</ul>
);
},
toggleLabelsPopover(visible) {
this.setState({
labelsPopoverVisible: _.isBoolean(visible) ? visible : !this.state.labelsPopoverVisible
});
},
render() {
var ns = 'cluster_page.nodes_tab.node.';
renderCompactNode(options) {
var node = this.props.node;
var isSelectable = node.isSelectable() && !this.props.locked && this.props.mode != 'edit';
var status = node.getStatusSummary();
var roles = this.props.cluster ? node.sortedRoles(this.props.cluster.get('roles').pluck('name')) : [];
// compose classes
var nodePanelClasses = {
node: true,
selected: this.props.checked,
'col-xs-12': this.props.viewMode != 'compact',
unavailable: !isSelectable
};
nodePanelClasses[status] = status;
var manufacturer = node.get('manufacturer') || '';
var logoClasses = {
'manufacturer-logo': true
};
logoClasses[manufacturer.toLowerCase()] = manufacturer;
var statusClasses = {
'node-status': true
};
var statusClass = {
pending_addition: 'text-success',
pending_deletion: 'text-warning',
error: 'text-danger',
ready: 'text-info',
provisioning: 'text-info',
deploying: 'text-success',
provisioned: 'text-info'
}[status];
statusClasses[statusClass] = true;
if (this.props.viewMode == 'compact') return (
var {ns, status, roles, nodePanelClasses, logoClasses, statusClasses, isSelectable} = options;
return (
<div className='compact-node'>
<div className={utils.classNames(nodePanelClasses)}>
<label className='node-box'>
@ -406,7 +368,10 @@ var Node = React.createClass({
}
</div>
);
},
renderStandardNode(options) {
var node = this.props.node;
var {ns, status, roles, nodePanelClasses, logoClasses, statusClasses} = options;
return (
<div className={utils.classNames(nodePanelClasses)}>
<label className='node-box'>
@ -463,6 +428,51 @@ var Node = React.createClass({
</label>
</div>
);
},
toggleLabelsPopover(visible) {
this.setState({
labelsPopoverVisible: _.isBoolean(visible) ? visible : !this.state.labelsPopoverVisible
});
},
render() {
var ns = 'cluster_page.nodes_tab.node.';
var node = this.props.node;
var isSelectable = node.isSelectable() && !this.props.locked && this.props.mode != 'edit';
var status = node.getStatusSummary();
var roles = this.props.cluster ? node.sortedRoles(this.props.cluster.get('roles').pluck('name')) : [];
// compose classes
var nodePanelClasses = {
node: true,
selected: this.props.checked,
'col-xs-12': this.props.viewMode != 'compact',
unavailable: !isSelectable
};
nodePanelClasses[status] = status;
var manufacturer = node.get('manufacturer') || '';
var logoClasses = {
'manufacturer-logo': true
};
logoClasses[manufacturer.toLowerCase()] = manufacturer;
var statusClasses = {
'node-status': true
};
var statusClass = {
pending_addition: 'text-success',
pending_deletion: 'text-warning',
error: 'text-danger',
ready: 'text-info',
provisioning: 'text-info',
deploying: 'text-success',
provisioned: 'text-info'
}[status];
statusClasses[statusClass] = true;
var renderMethod = this.props.viewMode == 'compact' ? this.renderCompactNode : this.renderStandardNode;
return renderMethod({ns, status, roles, nodePanelClasses, logoClasses, statusClasses, isSelectable});
}
});

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

@ -416,6 +416,29 @@ NodeListScreen = React.createClass({
getNodeLabels() {
return _.chain(this.props.nodes.pluck('labels')).flatten().map(_.keys).flatten().uniq().value();
},
getFilterResults(filter, node) {
var result;
switch (filter.name) {
case 'roles':
result = _.any(filter.values, (role) => node.hasRole(role));
break;
case 'status':
result = _.contains(filter.values, node.getStatusSummary());
break;
case 'manufacturer':
case 'cluster':
case 'group_id':
result = _.contains(filter.values, node.get(filter.name));
break;
default:
// handle number ranges
var currentValue = node.resource(filter.name);
if (filter.name == 'hdd' || filter.name == 'ram') currentValue = currentValue / Math.pow(1024, 3);
result = currentValue >= filter.values[0] && (_.isUndefined(filter.values[1]) || currentValue <= filter.values[1]);
break;
}
return result;
},
render() {
var cluster = this.props.cluster;
var locked = !!cluster && !!cluster.task({group: 'deployment', active: true});
@ -444,27 +467,7 @@ NodeListScreen = React.createClass({
return _.contains(filter.values, node.getLabel(filter.name));
}
var result;
switch (filter.name) {
case 'roles':
result = _.any(filter.values, (role) => node.hasRole(role));
break;
case 'status':
result = _.contains(filter.values, node.getStatusSummary());
break;
case 'manufacturer':
case 'cluster':
case 'group_id':
result = _.contains(filter.values, node.get(filter.name));
break;
default:
// handle number ranges
var currentValue = node.resource(filter.name);
if (filter.name == 'hdd' || filter.name == 'ram') currentValue = currentValue / Math.pow(1024, 3);
result = currentValue >= filter.values[0] && (_.isUndefined(filter.values[1]) || currentValue <= filter.values[1]);
break;
}
return result;
return this.getFilterResults(filter, node);
});
});
@ -1641,47 +1644,28 @@ NodeList = React.createClass({
if (sorter.isLabel) return getLabelValue(node, sorter.name);
var result;
var ns = 'cluster_page.nodes_tab.node.';
var cluster = this.props.cluster || this.props.clusters.get(node.get('cluster'));
switch (sorter.name) {
case 'roles':
result = node.getRolesSummary(this.props.roles) || i18n(ns + 'no_roles');
break;
case 'status':
result = i18n(ns + 'status.' + node.getStatusSummary(), {
os: cluster && cluster.get('release').get('operating_system') || 'OS'
});
break;
case 'manufacturer':
result = node.get('manufacturer') || i18n('common.not_specified');
break;
case 'group_id':
var sorterNameFormatters = {
roles: () => node.getRolesSummary(this.props.roles) || i18n(ns + 'no_roles'),
status: () => i18n(ns + 'status.' + node.getStatusSummary(), {
os: cluster && cluster.get('release').get('operating_system') || 'OS'
}),
manufacturer: () => node.get('manufacturer') || i18n('common.not_specified'),
group_id: () => {
var nodeNetworkGroup = this.props.nodeNetworkGroups.get(node.get('group_id'));
result = nodeNetworkGroup && i18n(ns + 'node_network_group', {
return nodeNetworkGroup && i18n(ns + 'node_network_group', {
group: nodeNetworkGroup.get('name') + (this.props.cluster ? '' : ' (' + cluster.get('name') + ')')
}) || i18n(ns + 'no_node_network_group');
break;
case 'cluster':
result = cluster && i18n(ns + 'cluster', {cluster: cluster.get('name')})
|| i18n(ns + 'unallocated');
break;
case 'hdd':
result = i18n('node_details.total_hdd', {total: utils.showDiskSize(node.resource('hdd'))});
break;
case 'disks':
result = composeNodeDiskSizesLabel(node);
break;
case 'ram':
result = i18n('node_details.total_ram', {total: utils.showMemorySize(node.resource('ram'))});
break;
case 'interfaces':
result = i18n('node_details.interfaces_amount', {count: node.resource('interfaces')});
break;
default:
result = i18n('node_details.' + sorter.name, {count: node.resource(sorter.name)});
}
return result;
},
cluster: () => cluster && i18n(ns + 'cluster', {cluster: cluster.get('name')}) || i18n(ns + 'unallocated'),
hdd: () => i18n('node_details.total_hdd', {total: utils.showDiskSize(node.resource('hdd'))}),
disks: () => composeNodeDiskSizesLabel(node),
ram: () => i18n('node_details.total_ram', {total: utils.showMemorySize(node.resource('ram'))}),
interfaces: () => i18n('node_details.interfaces_amount', {count: node.resource('interfaces')}),
default: () => i18n('node_details.' + sorter.name, {count: node.resource(sorter.name)})
};
return (sorterNameFormatters[sorter.name] || sorterNameFormatters.default)();
})).join('; ');
};
var groups = _.pairs(_.groupBy(this.props.nodes, groupingMethod));
@ -1717,8 +1701,8 @@ NodeList = React.createClass({
result = node1Label === node2Label ? 0 : _.isString(node1Label) ? -1 : _.isNull(node1Label) ? -1 : 1;
}
} else {
switch (sorter.name) {
case 'roles':
var comparators = {
roles: () => {
var roles1 = node1.sortedRoles(preferredRolesOrder);
var roles2 = node2.sortedRoles(preferredRolesOrder);
var order;
@ -1731,32 +1715,33 @@ NodeList = React.createClass({
}
result = order || roles1.length - roles2.length;
}
break;
case 'status':
},
status: () => {
result = _.indexOf(this.props.statusesToFilter, node1.getStatusSummary()) - _.indexOf(this.props.statusesToFilter, node2.getStatusSummary());
break;
case 'manufacturer':
},
manufacturer: () => {
result = utils.compare(node1, node2, {attr: sorter.name});
break;
case 'disks':
},
disks: () => {
result = utils.natsort(composeNodeDiskSizesLabel(node1), composeNodeDiskSizesLabel(node2));
break;
case 'group_id':
},
group_id: () => {
var nodeGroup1 = node1.get('group_id');
var nodeGroup2 = node2.get('group_id');
result = nodeGroup1 == nodeGroup2 ? 0 :
!nodeGroup1 ? 1 : !nodeGroup2 ? -1 : nodeGroup1 - nodeGroup2;
break;
case 'cluster':
},
cluster: () => {
var cluster1 = node1.get('cluster');
var cluster2 = node2.get('cluster');
result = cluster1 == cluster2 ? 0 :
!cluster1 ? 1 : !cluster2 ? -1 : utils.natsort(this.props.clusters.get(cluster1).get('name'), this.props.clusters.get(cluster2).get('name'));
break;
default:
},
default: () => {
result = node1.resource(sorter.name) - node2.resource(sorter.name);
break;
}
}
};
(comparators[sorter.name] || comparators.default)();
}
if (sorter.order == 'desc') {

143
static/views/cluster_page_tabs/setting_section.js
View File

@ -165,6 +165,78 @@ var SettingSection = React.createClass({
if (pluginMetadata.chosen_id !== initialVersion) this.onPluginVersionChange(pluginName, initialVersion);
}
},
renderTitle(options) {
var {metadata, sectionName, isGroupDisabled, processedGroupDependencies, showSettingGroupWarning, groupWarning, isPlugin} = options;
return metadata.toggleable ?
<Input
type='checkbox'
name='metadata'
label={metadata.label || sectionName}
defaultChecked={metadata.enabled}
disabled={isGroupDisabled || processedGroupDependencies.result}
tooltipText={showSettingGroupWarning && groupWarning}
onChange={isPlugin ? _.partial(this.togglePlugin, sectionName) : this.props.onChange}
/>
:
<span className={'subtab-group-' + sectionName}>{sectionName == 'common' ? i18n('cluster_page.settings_tab.groups.common') : metadata.label || sectionName}</span>;
},
renderCustomControl(options) {
var {setting, settingKey, error, isSettingDisabled, showSettingWarning, settingWarning, CustomControl, path} = options;
return <CustomControl
{...setting}
{... _.pick(this.props, 'cluster', 'settings', 'configModels')}
key={settingKey}
path={path}
error={error}
disabled={isSettingDisabled}
tooltipText={showSettingWarning && settingWarning}
/>;
},
renderRadioGroup(options) {
var {setting, settingKey, error, isSettingDisabled, showSettingWarning, settingWarning, settingName} = options;
var values = _.chain(_.cloneDeep(setting.values))
.map((value) => {
var processedValueRestrictions = this.props.checkRestrictions('disable', value);
if (!this.props.checkRestrictions('hide', value).result) {
value.disabled = isSettingDisabled || processedValueRestrictions.result;
value.defaultChecked = value.data == setting.value;
value.tooltipText = showSettingWarning && processedValueRestrictions.message;
return value;
}
})
.compact()
.value();
if (setting.type == 'radio') return (
<RadioGroup {...this.props}
key={settingKey}
name={settingName}
label={setting.label}
values={values}
error={error}
tooltipText={showSettingWarning && settingWarning}
/>
);
},
renderInput(options) {
var {setting, settingKey, error, isSettingDisabled, showSettingWarning, settingWarning, settingName} = options;
var settingDescription = setting.description &&
<span dangerouslySetInnerHTML={{__html: utils.urlify(_.escape(setting.description))}} />;
return <Input
{... _.pick(setting, 'type', 'label')}
key={settingKey}
name={settingName}
description={settingDescription}
children={setting.type == 'select' ? this.composeOptions(setting.values) : null}
debounce={setting.type == 'text' || setting.type == 'password' || setting.type == 'textarea'}
defaultValue={setting.value}
defaultChecked={_.isBoolean(setting.value) ? setting.value : false}
toggleable={setting.type == 'password'}
error={error}
disabled={isSettingDisabled}
tooltipText={showSettingWarning && settingWarning}
onChange={this.props.onChange}
/>;
},
render() {
var {settings, sectionName} = this.props;
var section = settings.get(sectionName);
@ -181,19 +253,7 @@ var SettingSection = React.createClass({
return (
<div className={'setting-section setting-section-' + sectionName}>
<h3>
{metadata.toggleable ?
<Input
type='checkbox'
name='metadata'
label={metadata.label || sectionName}
defaultChecked={metadata.enabled}
disabled={isGroupDisabled || processedGroupDependencies.result}
tooltipText={showSettingGroupWarning && groupWarning}
onChange={isPlugin ? _.partial(this.togglePlugin, sectionName) : this.props.onChange}
/>
:
<span className={'subtab-group-' + sectionName}>{sectionName == 'common' ? i18n('cluster_page.settings_tab.groups.common') : metadata.label || sectionName}</span>
}
{this.renderTitle({metadata, sectionName, isGroupDisabled, processedGroupDependencies, showSettingGroupWarning, groupWarning, isPlugin})}
</h3>
<div>
{isPlugin &&
@ -225,60 +285,17 @@ var SettingSection = React.createClass({
var showSettingWarning = showSettingGroupWarning && !isGroupDisabled && (!metadata.toggleable || metadata.enabled);
var settingWarning = _.compact([processedSettingRestrictions.message, processedSettingDependencies.message]).join(' ');
var renderOptions = {setting, settingKey, error, isSettingDisabled, showSettingWarning, settingWarning};
// support of custom controls
var CustomControl = customControls[setting.type];
if (CustomControl) {
return <CustomControl
{...setting}
{... _.pick(this.props, 'cluster', 'settings', 'configModels')}
key={settingKey}
path={path}
error={error}
disabled={isSettingDisabled}
tooltipText={showSettingWarning && settingWarning}
/>;
return this.renderCustomControl(_.extend(renderOptions, {CustomControl, path}));
} else if (setting.values) {
return this.renderRadioGroup(_.extend(renderOptions, {settingName}));
} else {
return this.renderInput(_.extend(renderOptions, {settingName}));
}
if (setting.values) {
var values = _.chain(_.cloneDeep(setting.values))
.map((value) => {
var processedValueRestrictions = this.props.checkRestrictions('disable', value);
if (!this.props.checkRestrictions('hide', value).result) {
value.disabled = isSettingDisabled || processedValueRestrictions.result;
value.defaultChecked = value.data == setting.value;
value.tooltipText = showSettingWarning && processedValueRestrictions.message;
return value;
}
})
.compact()
.value();
if (setting.type == 'radio') return <RadioGroup {...this.props}
key={settingKey}
name={settingName}
label={setting.label}
values={values}
error={error}
tooltipText={showSettingWarning && settingWarning}
/>;
}
var settingDescription = setting.description &&
<span dangerouslySetInnerHTML={{__html: utils.urlify(_.escape(setting.description))}} />;
return <Input
{... _.pick(setting, 'type', 'label')}
key={settingKey}
name={settingName}
description={settingDescription}
children={setting.type == 'select' ? this.composeOptions(setting.values) : null}
debounce={setting.type == 'text' || setting.type == 'password' || setting.type == 'textarea'}
defaultValue={setting.value}
defaultChecked={_.isBoolean(setting.value) ? setting.value : false}
toggleable={setting.type == 'password'}
error={error}
disabled={isSettingDisabled}
tooltipText={showSettingWarning && settingWarning}
onChange={this.props.onChange}
/>;
})}
</div>
</div>