openstack/fuel-web
Code Issues Proposed changes

DNS on UI (Nova-network)

Browse Source 
Change-Id: I83c49d8d8dde9d6f2241905d34804d225381c241
This commit is contained in:
jkirnosova 2013-10-17 19:26:32 +04:00 committed by Vitaly Kramskikh
parent 1405971e73
commit b5de3f8436
6 changed files with 96 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
nailgun/static/css/main.css
View File

@ -1564,21 +1564,21 @@ label.node-checkbox {
margin: 7px 0 5px 0;
}
.networks-table, .neutron-parameters {
.networks-table, .neutron-parameters, .nova-nameservers {
width: 100%;
margin-bottom: 10px;
}
.networks-table > div, .neutron-parameters > div {
.networks-table > div, .neutron-parameters > div, .nova-nameservers > div {
padding-left: 3px;
}
.networks-table .range-row-header, .neutron-parameters .range-row-header {
.networks-table .range-row-header, .neutron-parameters .range-row-header, .nova-nameservers .range-row-header {
height: 23px;
font-weight: bold;
}
.networks-table .range-row-header > div, .neutron-parameters .range-row-header > div {
.networks-table .range-row-header > div, .neutron-parameters .range-row-header > div, .nova-nameservers .range-row-header > div {
float: left;
margin-left: 10px;
font-size: 11px;
@ -1586,7 +1586,7 @@ label.node-checkbox {
width: 220px;
}
.networks-table .range-row label, .neutron-parameters .range-row label {
.networks-table .range-row label, .neutron-parameters .range-row label, .nova-nameservers .range-row label {
display: inline-block;
margin-bottom: 0;
float: left;
@ -1596,7 +1596,7 @@ label.node-checkbox {
width: 133px;
}
.networks-table .range-row-header > div:first-child, .neutron-parameters .range-row-header > div:first-child {
.networks-table .range-row-header > div:first-child, .neutron-parameters .range-row-header > div:first-child, .nova-nameservers .range-row-header > div:first-child {
margin-left: 202px;
}
@ -1636,11 +1636,11 @@ input.vlan-tagging {
padding: 0;
}
.networks-table div.error, .neutron-parameters div.error {
.networks-table div.error, .neutron-parameters div.error, .nova-nameservers div.error {
float: left;
}
.networks-table .error .help-inline, .neutron-parameters .error .help-inline {
.networks-table .error .help-inline, .neutron-parameters .error .help-inline, .nova-nameservers .error .help-inline {
display: block;
padding-top: 5px;
max-width: 540px;

17
nailgun/static/js/models.js
View File

@ -580,19 +580,34 @@ define(['utils'], function(utils) {
}
});
models.NovaNetworkConfiguration = Backbone.Model.extend({
constructorName: 'NovaNetworkConfiguration',
validate: function(attrs) {
var errors = {};
_.each(attrs.nameservers, function(nameserver, index) {
if (utils.validateIP(nameserver)) {
errors['nameserver-' + index] = 'Invalid nameserver';
}
});
return _.isEmpty(errors) ? null : errors;
}
});
models.NetworkConfiguration = Backbone.Model.extend({
constructorName: 'NetworkConfiguration',
urlRoot: '/api/clusters',
parse: function(response) {
response.networks = new models.Networks(response.networks);
response.neutron_parameters = new models.NeutronConfiguration(response.neutron_parameters);
response.dns_nameservers = new models.NovaNetworkConfiguration(response.dns_nameservers);
return response;
},
toJSON: function() {
return {
net_manager: this.get('net_manager'),
networks: this.get('networks').toJSON(),
neutron_parameters: this.get('neutron_parameters').toJSON()
neutron_parameters: this.get('neutron_parameters').toJSON(),
dns_nameservers: this.get('dns_nameservers').toJSON()
};
},
isNew: function() {

58
nailgun/static/js/views/cluster_page_tabs/network_tab.js
View File

@ -21,12 +21,13 @@ define(
'views/dialogs',
'text!templates/cluster/network_tab.html',
'text!templates/cluster/network.html',
'text!templates/cluster/nova_nameservers.html',
'text!templates/cluster/neutron_parameters.html',
'text!templates/cluster/verify_network_control.html'
],
function(utils, models, commonViews, dialogViews, networkTabTemplate, networkTemplate, neutronParametersTemplate, networkTabVerificationControlTemplate) {
function(utils, models, commonViews, dialogViews, networkTabTemplate, networkTemplate, novaNetworkConfigurationTemplate, neutronParametersTemplate, networkTabVerificationControlTemplate) {
'use strict';
var NetworkTab, Network, NeutronConfiguration, NetworkTabVerificationControl;
var NetworkTab, Network, NeutronConfiguration, NovaNetworkConfiguration, NetworkTabVerificationControl;
NetworkTab = commonViews.Tab.extend({
template: _.template(networkTabTemplate),
@ -56,7 +57,9 @@ function(utils, models, commonViews, dialogViews, networkTabTemplate, networkTem
},
checkForChanges: function() {
this.hasChanges = !_.isEqual(this.model.get('networkConfiguration').toJSON(), this.networkConfiguration.toJSON());
this.defaultButtonsState(_.some(this.networkConfiguration.get('networks').models, 'validationError') || !!(this.networkConfiguration.get('neutron_parameters') && this.networkConfiguration.get('neutron_parameters').validationError));
var neutronConfigurationErrors = !!(this.networkConfiguration.get('neutron_parameters') && this.networkConfiguration.get('neutron_parameters').validationError);
var novaNetworkConfigurationErrors = !!(this.networkConfiguration.get('dns_nameservers') && this.networkConfiguration.get('dns_nameservers').validationError);
this.defaultButtonsState(_.some(this.networkConfiguration.get('networks').models, 'validationError') || neutronConfigurationErrors || novaNetworkConfigurationErrors);
},
changeManager: function(e) {
this.$('.net-manager input').attr('checked', function(el, oldAttr) {return !oldAttr;});
@ -101,7 +104,9 @@ function(utils, models, commonViews, dialogViews, networkTabTemplate, networkTem
}, this));
},
verifyNetworks: function() {
if (!_.some(this.networkConfiguration.get('networks').models, 'validationError') && (!this.networkConfiguration.get('neutron_parameters') || !this.networkConfiguration.get('neutron_parameters').validationError)) {
var neutronConfigurationErrors = !!(this.networkConfiguration.get('neutron_parameters') && this.networkConfiguration.get('neutron_parameters').validationError);
var novaNetworkConfigurationErrors = !!(this.networkConfiguration.get('dns_nameservers') && this.networkConfiguration.get('dns_nameservers').validationError);
if (!_.some(this.networkConfiguration.get('networks').models, 'validationError') && !neutronConfigurationErrors && !novaNetworkConfigurationErrors) {
this.$('.verify-networks-btn').prop('disabled', true);
this.filterEmptyIpRanges();
this.page.removeFinishedTasks().always(_.bind(this.startVerification, this));
@ -118,7 +123,9 @@ function(utils, models, commonViews, dialogViews, networkTabTemplate, networkTem
},
applyChanges: function() {
var deferred;
if (!_.some(this.networkConfiguration.get('networks').models, 'validationError') && (!this.networkConfiguration.get('neutron_parameters') || !this.networkConfiguration.get('neutron_parameters').validationError)) {
var neutronConfigurationErrors = !!(this.networkConfiguration.get('neutron_parameters') && this.networkConfiguration.get('neutron_parameters').validationError);
var novaNetworkConfigurationErrors = !!(this.networkConfiguration.get('dns_nameservers') && this.networkConfiguration.get('dns_nameservers').validationError);
if (!_.some(this.networkConfiguration.get('networks').models, 'validationError') && !neutronConfigurationErrors && !novaNetworkConfigurationErrors) {
this.disableControls();
this.filterEmptyIpRanges();
deferred = Backbone.sync('update', this.networkConfiguration, {url: _.result(this.model, 'url') + '/network_configuration/' + this.model.get('net_provider')})
@ -225,6 +232,16 @@ function(utils, models, commonViews, dialogViews, networkTabTemplate, networkTem
}, this);
}
},
renderNovaNetworkConfiguration: function() {
if (this.model.get('net_provider') == 'nova_network' && this.networkConfiguration.get('dns_nameservers')) {
var novaNetworkConfigurationView = new NovaNetworkConfiguration({
novaNetworkConfiguration: this.networkConfiguration.get('dns_nameservers'),
tab: this
});
this.registerSubView(novaNetworkConfigurationView);
this.$('.nova-nameservers').html(novaNetworkConfigurationView.render().el);
}
},
renderNeutronConfiguration: function() {
if (this.model.get('net_provider') == 'neutron' && this.networkConfiguration.get('neutron_parameters')) {
var neutronConfigurationView = new NeutronConfiguration({
@ -245,6 +262,7 @@ function(utils, models, commonViews, dialogViews, networkTabTemplate, networkTem
verificationLocked: this.isVerificationLocked()
}));
this.renderNetworks();
this.renderNovaNetworkConfiguration();
this.renderNeutronConfiguration();
this.renderVerificationControl();
return this;
@ -376,6 +394,36 @@ function(utils, models, commonViews, dialogViews, networkTabTemplate, networkTem
}
});
NovaNetworkConfiguration = Backbone.View.extend({
template: _.template(novaNetworkConfigurationTemplate),
events: {
'keyup input[type=text]': 'onChange'
},
onChange: function(e) {
this.$('input[type=text]').removeClass('error');
this.$('.help-inline').text('');
this.novaNetworkConfiguration.set({nameservers: [$.trim(this.$('input[name=nameserver-0]').val()), $.trim(this.$('input[name=nameserver-1]').val())]}, {validate: true});
this.tab.checkForChanges();
this.tab.page.removeFinishedTasks();
},
initialize: function(options) {
_.defaults(this, options);
this.novaNetworkConfiguration.on('invalid', function(model, errors) {
this.$('input.error').removeClass('error').find('.help-inline').text('');
_.each(errors, _.bind(function(error, field) {
this.$('input[name=' + field + ']').addClass('error').parents('.network-attribute').find('.error .help-inline').text(error);
}, this));
}, this);
},
render: function() {
this.$el.html(this.template({
nameservers: this.novaNetworkConfiguration.get('nameservers'),
locked: this.tab.isLocked()
}));
return this;
}
});
NeutronConfiguration = Backbone.View.extend({
template: _.template(neutronParametersTemplate),
events: {

1
nailgun/static/templates/cluster/network_tab.html
View File

@ -22,6 +22,7 @@
<hr>
<% } %>
<div class="networks-table"></div>
<div class="nova-nameservers"></div>
<div class="neutron-parameters"></div>
<% } else { %>
<div class="row row-fluid">

17
nailgun/static/templates/cluster/nova_nameservers.html Normal file
View File

@ -0,0 +1,17 @@
<% var disabled = locked ? 'disabled' : '' %>
<div>
<legend class="networks dns-servers">DNS Servers</legend>
<div class="network-attribute">
<div class="networks-sub-title parameter-name">Name servers</div>
<div class="range-row clearfix">
<label class="parameter-box clearfix">
<div class="parameter-control"><input type="text" value="<%- nameservers[0] %>" class="nameserver" name="nameserver-0" <%= disabled %> /></div>
</label>
<label class="parameter-box clearfix">
<div class="parameter-control"><input type="text" value="<%- nameservers[1] %>" class="nameserver" name="nameserver-1" <%= disabled %> /></div>
</label>
<div class="error"><span class="help-inline"></span></div>
</div>
</div>
</div>
</div>

2
nailgun/ui_tests/test_cluster_network.js
View File

@ -21,7 +21,7 @@ casper.then(function() {
this.test.comment('Testing cluster networks: layout rendered');
this.test.assertEvalEquals(function() {return $('.net-manager input[type=radio]').length}, 2, 'Network manager options are presented');
this.test.assertExists('.net-manager input[value=FlatDHCPManager]:checked', 'Flat DHCP manager is chosen');
this.test.assertEvalEquals(function() {return $('legend.networks').length}, 5, 'All networks are presented');
this.test.assertEvalEquals(function() {return $('legend.networks:not(.dns-servers)').length}, 5, 'All networks are presented');
this.test.assertDoesntExist('.verify-networks-btn:disabled', 'Verify networks button is enabled');
this.test.assertExists('.apply-btn:disabled', 'Save networks button is disabled');
});