etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

bug 12351 

-Add 'create new network' field on select network dropdown, with
 network offering select

-Merge direct/shared networks into one list
This commit is contained in:
Brian Federle 2011-12-06 16:19:00 -08:00
parent 2150409a08
commit e3aa4fb4bb
5 changed files with 145 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
ui/css/cloudstack3.css
View File

@ -63,6 +63,7 @@ table thead {
}
table thead th {
height: 31px;
border: 1px solid #C6C3C3;
color: #566677;
border-top: none;
@ -4117,7 +4118,7 @@ label.error {
.multi-wizard .content {
background: #FFFFFF;
width: 430px;
height: 366px;
height: 401px;
margin: 24px 0 0;
/*+border-radius:6px;*/
-moz-border-radius: 6px;
@ -4613,12 +4614,36 @@ label.error {
.multi-wizard.instance-wizard .select-network .select table td {
padding: 0;
margin: 0;
vertical-align: top;
}
.multi-wizard.instance-wizard .select-network .select table .select-container {
margin: 0px;
border: 0;
height: 112px;
height: 253px;
}
.multi-wizard.instance-wizard .select-network .select.new-network table .select-container {
height: 29px;
overflow: visible;
}
.multi-wizard.instance-wizard .select-network .select.new-network table .select-container .select {
padding: 0;
margin: -12px 0 0;
}
.multi-wizard.instance-wizard .select-network .select.new-network table .select-container .select select {
width: 178px;
margin: 0px 0 0;
/*+placement:shift;*/
position: relative;
left: 0;
top: 0;
}
.multi-wizard.instance-wizard .select-network .select.new-network {
margin: -17px 0 0;
}
.multi-wizard.instance-wizard .select-network .main-desc {
@ -4662,6 +4687,26 @@ label.error {
margin: 21px 15px 0px;
}
/**** New network*/
.multi-wizard.instance-wizard .select-network .select.new-network {
}
.multi-wizard.instance-wizard .select-network .select.new-network input {
margin-top: 24px;
}
.multi-wizard.instance-wizard .select-network .select.new-network .secondary-input {
width: 97px;
}
.multi-wizard.instance-wizard .select-network .select.new-network .secondary-input .name {
margin: 0 17px 0 0;
}
.multi-wizard.instance-wizard .select-network .select.new-network .select-desc {
width: 255px;
}
.multi-wizard.instance-wizard .select-network .select-container .select .select-desc .desc {
font-size: 11px;
color: #808080;
@ -4670,6 +4715,7 @@ label.error {
}
.multi-wizard.instance-wizard .select-network .select-container .select .select-desc .name {
width: 116px;
font-size: 11px;
font-weight: normal;
float: left;
@ -4677,6 +4723,18 @@ label.error {
margin: 0 16px 0 0;
}
.multi-wizard.instance-wizard .select-network .select.new-network .select-desc .name {
width: 61px;
margin: 4px 0 0;
}
.multi-wizard.instance-wizard .select-network .select.new-network.unselected .select-desc .name {
color: #808080;
}
.multi-wizard.instance-wizard .select-network .select.new-network .select-desc .desc {
}
/*** Confirmation*/
.multi-wizard .review {
}

25
ui/index-test.html
View File

@ -194,7 +194,7 @@
<table>
<thead>
<tr>
<th>My networks (Isolated)</th>
<th>Networks</th>
</tr>
</thead>
<tbody>
@ -207,17 +207,34 @@
</tbody>
</table>
</div>
<div class="select shared-networks">
<div class="select new-network">
<table>
<thead>
<tr>
<th>Shared networks</th>
<th>Add new network</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="select-container">
<div class="select-container fixed">
<div class="select even">
<input type="checkbox" name="new-network"
wizard-field="my-networks"
value="create-new-network"
checked="checked" />
<div class="select-desc">
<div class="name">NEW</div>
<div class="desc">
<select name="new-network-serviceofferingid">
</select>
</div>
</div>
<div class="secondary-input">
<input type="radio" name="defaultNetwork" value="new-network" />
<div class="name">Default</div>
</div>
</div>
</div>
</td>
</tr>

25
ui/index.jsp
View File

@ -194,7 +194,7 @@
<table>
<thead>
<tr>
<th>My networks (Isolated)</th>
<th>Networks</th>
</tr>
</thead>
<tbody>
@ -207,17 +207,34 @@
</tbody>
</table>
</div>
<div class="select shared-networks">
<div class="select new-network">
<table>
<thead>
<tr>
<th>Shared networks</th>
<th>Add new network</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="select-container">
<div class="select-container fixed">
<div class="select even">
<input type="checkbox" name="new-network"
wizard-field="my-networks"
value="create-new-network"
checked="checked" />
<div class="select-desc">
<div class="name">NEW</div>
<div class="desc">
<select name="new-network-serviceofferingid">
</select>
</div>
</div>
<div class="secondary-input">
<input type="radio" name="defaultNetwork" value="new-network" />
<div class="name">Default</div>
</div>
</div>
</div>
</td>
</tr>

3
ui/scripts-test/instances.js
View File

@ -102,7 +102,8 @@
sharedNetworks: $.grep(testData.data.networks, function(elem) {
return elem.isdefault === false;
}),
securityGroups: testData.data.securityGroups
securityGroups: testData.data.securityGroups,
networkOfferings: testData.data.networkOfferings
}
});
},

70
ui/scripts/ui-custom/instanceWizard.js
View File

@ -22,7 +22,7 @@
// Save instance and close wizard
var completeAction = function() {
var data = cloudStack.serializeForm($form);
args.action({
// Populate data
data: data,
@ -67,7 +67,7 @@
$(data).each(function() {
var id = this[fields.id];
var $select = $('<div>')
.addClass('select')
.append(
@ -84,7 +84,7 @@
var $radio = $(this).closest('.select').find('input[type=radio]');
if ($radio.is(':checked') && !$(this).is(':checked')) {
return false;
return false;
}
return true;
@ -243,7 +243,7 @@
[
['featuredtemplates', 'instance-wizard-featured-templates'],
['communitytemplates', 'instance-wizard-community-templates'],
['mytemplates', 'instance-wizard-my-templates'],
['mytemplates', 'instance-wizard-my-templates'],
['isos', 'instance-wizard-my-isos']
]
).each(function() {
@ -266,7 +266,7 @@
if (formData.serviceofferingid) {
$step.find('input[type=radio]').filter(function() {
return $(this).val() == formData.serviceofferingid;
}).click();
}).click();
} else {
$step.find('input[type=radio]:first').click();
}
@ -332,7 +332,7 @@
var item = $.grep(args.data.diskOfferings, function(elem) {
return elem.id == val;
})[0];
if (!item) return true;
var custom = item[args.customFlag];
@ -384,14 +384,14 @@
'network': function($step, formData) {
var originalValues = function(formData) {
// Default networks
$step.find('input[name=my-networks]').filter(function() {
return $(this).val() == formData['my-networks'];
$step.find('input[type=radio]').filter(function() {
return $(this).val() == formData['defaultNetwork'];
}).click();
// Optional networks
var selectedOptionalNetworks = [];
if ($.isArray(formData['shared-networks'])) {
if ($.isArray(formData['shared-networks']) != -1) {
$(formData['shared-networks']).each(function() {
selectedOptionalNetworks.push(this);
});
@ -408,12 +408,40 @@
});
};
var $newNetworkFields = $step.find('.new-network').addClass('unselected').find('.desc, .secondary-input');
// Setup new network field
$step.find('.new-network input[type=checkbox]').unbind('click');
$step.find('.new-network input[type=checkbox]').click(function() {
$newNetworkFields.toggle();
if ($newNetworkFields.is(':hidden') &&
$newNetworkFields.find('input[type=radio]').is(':checked')) {
$step.find('input[type=radio]:first').click();
}
});
setTimeout(function() {
$step.find('.new-network input[type=checkbox]').attr('checked', false);
$newNetworkFields.hide();
});
// Show relevant conditional sub-step if present
$step.find('.wizard-step-conditional').hide();
return {
response: {
success: function(args) {
// Populate network offering drop-down
$(args.data.networkOfferings).each(function() {
$('<option>')
.attr({
id: this.id
})
.html(this.name)
.appendTo($newNetworkFields.find('select'));
});
if (args.type) {
$step.find('.wizard-step-conditional').filter(function() {
return $(this).hasClass(args.type);
@ -424,9 +452,9 @@
// My networks
$step.find('.my-networks .select-container').append(
makeSelects('my-networks', args.data.myNetworks, {
makeSelects('my-networks', $.merge(args.data.myNetworks, args.data.sharedNetworks), {
name: 'name',
desc: 'displaytext',
desc: 'type',
id: 'id'
}, {
type: 'checkbox',
@ -439,22 +467,6 @@
})
);
// Shared networks
$step.find('.shared-networks .select-container').append(
makeSelects('shared-networks', args.data.sharedNetworks, {
name: 'name',
desc: 'displaytext',
id: 'id'
}, {
type: 'checkbox',
secondary: {
desc: 'Default',
name: 'defaultNetwork',
type: 'radio'
}
})
);
// Security groups (alt. page)
$step.find('.security-groups .select-container').append(
makeSelects('security-groups', args.data.securityGroups, {
@ -490,7 +502,7 @@
}
if (fieldName) {
$(this).html(fieldName);
$(this).html(fieldName);
} else {
$(this).html('(None)');
}
@ -517,7 +529,7 @@
var formData = cloudStack.serializeForm($form);
if (!$targetStep.hasClass('review')) { // Review row content is not autogenerated
$targetStep.find('.select-container div, option').remove();
$targetStep.find('.select-container:not(.fixed) div, option:not(:disabled)').remove();
}
dataProvider(