Skip to content

Commit ed176cf

Browse files
broguebrogue
committed
-Fix zone chart -- $browser is undefined error
-Support dynamic generation of create form fields (for add network offering) -Add example add network offering form
1 parent 0bb325a commit ed176cf

4 files changed

Lines changed: 205 additions & 12 deletions

File tree

‎ui/css/cloudstack3.css‎

Lines changed: 43 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2598,7 +2598,6 @@ Dialogs*/
25982598
/*** Create form*/
25992599
.ui-dialog div.form-container {
26002600
height: 106px;
2601-
width: 100%;
26022601
text-align: left;
26032602
display: inline-block;
26042603
}
@@ -2610,6 +2609,7 @@ Dialogs*/
26102609
}
26112610

26122611
.ui-dialog div.form-container div.form-item {
2612+
width: 100%;
26132613
display: inline-block;
26142614
margin: 0 0 12px;
26152615
}
@@ -2637,15 +2637,14 @@ Dialogs*/
26372637
}
26382638

26392639
.ui-dialog div.form-container div.value {
2640-
width: 232px;
2641-
overflow: hidden;
2642-
float: right;
2640+
width: 61%;
2641+
float: left;
26432642
margin: 0 0 0 15px;
26442643
display: inline-block;
26452644
}
26462645

26472646
.ui-dialog div.form-container div.value input {
2648-
width: 226px;
2647+
width: 98%;
26492648
font-size: 14px;
26502649
background: #F6F6F6;
26512650
/*+border-radius:4px;*/
@@ -2663,7 +2662,7 @@ Dialogs*/
26632662
}
26642663

26652664
.ui-dialog div.form-container div.value select {
2666-
width: 231px;
2665+
width: 100%;
26672666
float: right;
26682667
}
26692668

@@ -2741,6 +2740,44 @@ Dialogs*/
27412740
border-color: #878787;
27422741
}
27432742

2743+
/**** Dynamic input*/
2744+
.ui-dialog div.form-container div.value .dynamic-input {
2745+
background: #FFFFFF;
2746+
width: 98%;
2747+
min-height: 50px;
2748+
clear: both;
2749+
max-height: 211px;
2750+
overflow: auto;
2751+
border: 1px solid #CDCDCD;
2752+
/*+border-radius:6px;*/
2753+
-moz-border-radius: 6px;
2754+
-webkit-border-radius: 6px;
2755+
-khtml-border-radius: 6px;
2756+
border-radius: 6px 6px 6px 6px;
2757+
/*+box-shadow:inset -1px 1px 1px #636363;*/
2758+
-moz-box-shadow: inset -1px 1px 1px #636363;
2759+
-webkit-box-shadow: inset -1px 1px 1px #636363;
2760+
-o-box-shadow: inset -1px 1px 1px #636363;
2761+
box-shadow: inset -1px 1px 1px #636363;
2762+
}
2763+
2764+
.ui-dialog div.form-container div.value .dynamic-input .form-item {
2765+
width: 97%;
2766+
margin: 4px 0 0 5px;
2767+
}
2768+
2769+
.ui-dialog div.form-container div.value .dynamic-input .name {
2770+
width: 86px;
2771+
}
2772+
2773+
.ui-dialog div.form-container div.value .dynamic-input .name label {
2774+
width: inherit;
2775+
}
2776+
2777+
.ui-dialog div.form-container div.value .dynamic-input .value {
2778+
width: 50%;
2779+
}
2780+
27442781
/*User options*/
27452782
#user-options {
27462783
width: 115px;

‎ui/scripts-test/configuration.js‎

Lines changed: 133 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
(function(cloudStack, testData) {
1+
(function(cloudStack, testData, $) {
22
cloudStack.sections.configuration = {
33
title: 'Configuration',
44
id: 'configuration',
@@ -72,7 +72,7 @@
7272
setTimeout(function() {
7373
args.response.success({
7474
data: testData.data.serviceOfferings
75-
});
75+
});
7676
});
7777
}
7878
}
@@ -144,7 +144,7 @@
144144
setTimeout(function() {
145145
args.response.success({
146146
data: testData.data.systemServiceOfferings
147-
});
147+
});
148148
});
149149
}
150150
}
@@ -250,6 +250,135 @@
250250
networkrate: { label: 'Network Rate' },
251251
traffictype: { label: 'Traffic Type'}
252252
},
253+
254+
actions: {
255+
add: {
256+
label: 'Add network offering',
257+
258+
action: function(args) {
259+
setTimeout(function() {
260+
args.response.success();
261+
}, 200);
262+
},
263+
264+
createForm: {
265+
title: 'Add network offering',
266+
desc: 'Please specify the network offering',
267+
fields: {
268+
name: { label: 'Name', validation: { required: true } },
269+
270+
displayText: { label: 'Display Text', validation: { required: true } },
271+
272+
maxConnections: { label: 'Max Connections' },
273+
274+
networkRate: { label: 'Network Rate' },
275+
276+
trafficType: {
277+
label: 'Traffic Type', validation: { required: true },
278+
select: function(args) {
279+
args.response.success({
280+
data: [
281+
{ id: 'GUEST', description: 'Guest' }
282+
]
283+
});
284+
}
285+
},
286+
287+
guestType: {
288+
label: 'Guest Type',
289+
select: function(args) {
290+
args.response.success({
291+
data: [
292+
{ id: 'Isolated', description: 'Isolated' },
293+
{ id: 'Shared', description: 'Shared' }
294+
]
295+
});
296+
}
297+
},
298+
299+
availability: {
300+
label: 'Availability',
301+
select: function(args) {
302+
args.response.success({
303+
data: [
304+
{ id: 'Required', description: 'Required' },
305+
{ id: 'Optional', description: 'Optional' },
306+
{ id: 'Unavailable', description: 'Unavailable' }
307+
]
308+
});
309+
}
310+
},
311+
312+
serviceOfferingId: {
313+
label: 'Service Offering',
314+
select: function(args) {
315+
args.response.success({
316+
data: $.map(testData.data.serviceOfferings, function(elem) {
317+
return {
318+
id: elem.id,
319+
description: elem.name
320+
};
321+
})
322+
});
323+
}
324+
},
325+
326+
specifyVlan: { label: 'Specify VLAN', isBoolean: true },
327+
328+
vlanId: { label: 'VLAN ID', isHidden: true, dependsOn: 'specifyVlan'},
329+
330+
supportedServices: {
331+
label: 'Supported Services',
332+
333+
dynamic: function(args) {
334+
setTimeout(function() {
335+
var fields = {};
336+
var services = ['Vpn', 'Dhcp', 'Gateway', 'Firewall', 'Lb', 'UserData', 'SourceNat', 'StaticNat', 'PortForwarding', 'SecurityGroup'];
337+
338+
$(services).each(function() {
339+
var id = {
340+
isEnabled: this + '.' + 'isEnabled',
341+
capabilities: this + '.' + 'capabilities',
342+
provider: this + '.' + 'provider'
343+
};
344+
345+
fields[id.isEnabled] = { label: this, isBoolean: true };
346+
fields[id.provider] = {
347+
label: this + ' Provider',
348+
isHidden: true,
349+
dependsOn: id.isEnabled,
350+
select: function(args) {
351+
args.response.success({
352+
data: [
353+
{ id: 'NetScaler', description: 'NetScaler'},
354+
{ id: 'SRX', description: 'SRX' }
355+
]
356+
});
357+
}
358+
};
359+
});
360+
361+
args.response.success({
362+
fields: fields
363+
});
364+
}, 50);
365+
}
366+
},
367+
368+
tags: { label: 'Tags' }
369+
}
370+
},
371+
372+
notification: {
373+
poll: testData.notifications.testPoll
374+
},
375+
messages: {
376+
notification: function(args) {
377+
return 'Added network offering';
378+
}
379+
}
380+
}
381+
},
253382
dataProvider: function(args) {
254383
setTimeout(function() {
255384
args.response.success({
@@ -261,4 +390,4 @@
261390
}
262391
}
263392
};
264-
})(cloudStack, testData);
393+
})(cloudStack, testData, jQuery);

‎ui/scripts/ui-custom/zoneChart.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,7 @@
247247
complete: function($newPanel) {
248248
$newPanel.detailView(
249249
$.extend(true, {}, naas.mainNetworks[itemID].detailView, {
250+
$browser: listViewArgs.$browser,
250251
context: { zones: context.physicalResources }
251252
})
252253
);

‎ui/scripts/ui/dialog.js‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
// Checkbox
4545
$dependsOn.bind('click', function(event) {
4646
var $target = $(this);
47-
var $dependent = $form.find('[depends-on=' + dependsOn + ']');
47+
var $dependent = $target.closest('form').find('[depends-on=\'' + dependsOn + '\']');
4848

4949
if (($target.is(':checked') && !isReverse) ||
5050
($target.is(':unchecked') && isReverse)) {
@@ -102,6 +102,7 @@
102102
}
103103
}
104104
};
105+
105106
selectFn = this.select;
106107
$input = $('<select>')
107108
.attr({ name: key })
@@ -114,9 +115,10 @@
114115
$.extend(selectArgs, { $select: $input });
115116

116117
if (dependsOn) {
117-
$dependsOn = $form.find('input, select').filter(function() {
118+
$dependsOn = $input.closest('form').find('input, select').filter(function() {
118119
return $(this).attr('name') === dependsOn;
119120
});
121+
120122
$dependsOn.bind('change', function(event) {
121123
var $target = $(this);
122124

@@ -166,6 +168,30 @@
166168
$input.attr('checked', 'checked');
167169
}
168170
}
171+
} else if (this.dynamic) {
172+
// Generate a 'sub-create-form' -- append resulting fields
173+
$input = $('<div>').addClass('dynamic-input').appendTo($value);
174+
$form.hide();
175+
176+
this.dynamic({
177+
response: {
178+
success: function(args) {
179+
var form = cloudStack.dialog.createForm({
180+
noDialog: true,
181+
form: {
182+
title: '',
183+
fields: args.fields
184+
}
185+
});
186+
187+
var $fields = form.$formContainer.find('.form-item').appendTo($input);
188+
$form.show();
189+
190+
// Form should be slightly wider
191+
$form.closest(':ui-dialog').dialog('option', { position: 'center' });
192+
}
193+
}
194+
});
169195
} else {
170196
$input = $('<input>').attr({
171197
name: key,

0 commit comments

Comments
 (0)