1 {% extends "layout_wide.html" %}
4 <script type="text/javascript">
8 /* render_flavor & render_image */
9 function render_option(obj){
10 var option = document.createElement("option");
11 option.text = obj["@name"];
12 option.value = obj["@name"];
15 function render_description(platform, obj, type){
16 if($('#'+platform+'_'+type).length==0){
17 $('#'+platform+'_add').append("<div id='"+platform+"_"+type+"'>");
19 var d = platform+'_'+type+'_'+obj['@name'];
20 d = d.replace(/ /g, '');
21 id = d.replace( /(:|\.|\[|\])/g, "\\$1" );
22 if($('#'+id).length==0){
23 $('#'+platform+'_'+type).append("<div id='"+d+"' class='alert-success col-md-5' style='margin-top:10px;display:none;border-style:solid;border-color:white;border-width:2px;'></div>");
25 if($('#'+id+' div').length==0){
26 jQuery.each(obj, function(key,val){
27 if (key != 'openstack:image'){
28 $('#'+id).append("<div>"+key.replace('@','')+": "+val+"</div>");
33 function toogle_div(platform, value, type){
34 $("#"+platform+"_add").show();
35 $("[id^='"+platform+"_"+type+"_"+"']").hide();
36 d = platform+'_'+type+'_'+value;
37 d = d.replace(/ /g, '');
38 id = d.replace( /(:|\.|\[|\])/g, "\\$1" );
41 function render_cloud(platform, node){
42 elm = document.getElementById(platform+'_select');
43 //newElement = document.createElement('p');
44 //elm.appendChild(newElement);
45 global_list[platform]={};
46 if('openstack:sliver' in node){
47 selectFlavor = document.createElement('select');
48 selectFlavor.id = platform+"_selectFlavor";
49 selectFlavor.name = platform+"_selectFlavor";
50 selectFlavor.onchange = function(){
51 /* 1) Display corresponding Flavor div - hide others - reset selectImage value */
52 toogle_div(platform, this.value, 'flavor');
53 /* 3) Disable Images, Enable only compatible ones in selectImage */
54 console.log(this.value);
55 console.log(global_list[platform][this.value]);
56 $("#"+platform+"_selectImage option[value=0]").prop('selected', true);
57 $("[id^='"+platform+"_image_"+"']").hide();
58 $("#"+platform+"_selectImage option").attr("disabled",true);
59 $.each(global_list[platform][this.value], function (i,v){
60 $("#"+platform+"_selectImage option[value='" + v + "']").attr("disabled",false);
63 var option = document.createElement("option");
64 option.text = "-- select a flavor --";
66 selectFlavor.appendChild(option);
67 jQuery.each( node['openstack:sliver'], function( i, sliver ) {
68 if('openstack:flavor' in sliver){
69 f = render_option(sliver['openstack:flavor']);
70 selectFlavor.appendChild(f);
71 flavor = sliver["openstack:flavor"];
72 /* 1) create hidden div to explain caracteristics of the flavor */
73 render_description(platform, flavor, 'flavor');
74 flavor_name = flavor['@name'];
75 global_list[platform][flavor_name]=[];
76 if ("openstack:image" in flavor){
77 selectImage = document.createElement('select');
78 selectImage.id = platform+"_selectImage";
79 selectImage.name = platform+"_selectImage";
80 selectImage.onchange = function(){
81 /* 2) display corresponding Image div - hide others */
82 toogle_div(platform, this.value, 'image');
84 var option = document.createElement("option");
85 option.text = "-- select an image --";
87 selectImage.appendChild(option);
88 if(flavor["openstack:image"] instanceof Array){
89 jQuery.each( flavor["openstack:image"], function( i, img ) {
90 image = render_option(img);
91 selectImage.appendChild(image);
92 /* 2) create hidden div to explain caracteristics of the image */
93 render_description(platform, img, 'image');
94 global_list[platform][flavor_name].push(img['@name']);
97 image = render_option(flavor["openstack:image"]);
98 selectImage.appendChild(image);
99 /* 2) create hidden div to explain caracteristics of the image */
100 render_description(platform, flavor["openstack:image"], 'image');
101 global_list[platform][flavor_name].push(flavor['openstack:image']['@name']);
107 elm.appendChild(selectFlavor);
108 elm.appendChild(selectImage);
110 //$("#"+platform+"_selectFlavor").css("width","50%");
111 //$("#"+platform+"_selectImage").css("width","50%");
113 function is_finished(len_platforms, pf_status){
114 if(len_platforms == pf_status){
120 function send_delete(platform, sliver_name){
121 jQuery('#'+platform+'_vm').val(sliver_name);
122 jQuery('#'+platform+'_form_delete').submit();
124 function render_node(platform, node){
125 if('openstack:sliver' in node){
126 sliver = node['openstack:sliver']
127 var d = platform+'_existing_'+sliver['@sliver_name'];
128 d = d.replace(/ /g, '');
129 id = d.replace( /(:|\.|\[|\])/g, "\\$1" );
130 $("#"+platform+"_existing").append("<div id='"+platform+'_existing_'+sliver['@sliver_name']+"' class='row'></div>");
131 //$("#"+id).append("<input type='hidden' name='"+platform+"_"+sliver['@sliver_name']+"' value='"+sliver['@sliver_name']+"'>");
132 $("#"+id).append("<div class='col-md-2' style='margin-left:15px;'>"+sliver['@sliver_name']+"</div>");
133 $("#"+id).append("<div class='col-md-4'>"+sliver['openstack:flavor']['@name']+"</div>");
134 $("#"+id).append("<div class='col-md-4'>"+sliver['openstack:flavor']['openstack:image']['@name']+"</div>");
135 $("#"+id).append("<div class='col-md-1'><input id='"+platform+"_delete_"+sliver['@sliver_name']+"' type='submit' form='"+platform+"_form_delete' value='Delete' onclick=send_delete('"+platform+"','"+sliver['@sliver_name']+"');></div>");
137 sliver['openstack:address']
138 sliver['openstack:flavor']
143 $(document).ready(function() {
145 var platform_status = Array();
146 var platform_empty = Array();
147 {% for platform in platforms %}
148 console.log('{{platform}}');
149 {% if platform in cloud_platforms %}
150 $.post("/sfa/Describe",{'hrn':'{{slicename}}', 'type':'slice', 'platform':['{{platform}}']}, function( data ) {
152 if('parsed' in data['{{platform}}'] && 'rspec' in data['{{platform}}']['parsed']){
153 rspec = data['{{platform}}']['parsed']['rspec'];
155 if(rspec['node'] instanceof Array) {
156 jQuery.each( rspec['node'], function( i, node ) {
157 render_node('{{platform}}',node);
160 render_node('{{platform}}',rspec['node']);
165 $.post("/sfa/ListResources",{'platform':['{{platform}}']}, function( d ) {
168 if('parsed' in data['{{platform}}'] && 'rspec' in data['{{platform}}']['parsed']){
169 rspec = data['{{platform}}']['parsed']['rspec'];
171 if(rspec['node'] instanceof Array) {
172 jQuery.each( rspec['node'], function( i, node ) {
173 render_cloud('{{platform}}',node);
176 render_cloud('{{platform}}',rspec['node']);
179 platform_empty.push('{{platform}}');
182 platform_empty.push('{{platform}}');
184 platform_status.push('{{platform}}');
185 if(is_finished({{len_platforms}},platform_status.length)){
186 $("#loading").hide();
187 if(platform_empty.length == {{len_platforms}}){
188 $("#warning_message").show();
201 {% for platform in platforms %}
202 {% if platform in cloud_platforms %}
203 <div style="padding-left:20px;padding-top:20px;padding-right:20px;padding-bottom:20px;border-style:solid;border-width:1px;width:700px;">
204 <h2>{{ platform }}</h2>
205 <form id="{{platform}}_form_add" method="post">
207 <div id="{{platform}}_input" class="row">
208 <div class="col-md-1">
209 <input type="text" maxlength="2" id="{{platform}}_number" name="{{platform}}_number" style="width:2.2em;min-width:2.2em;">
211 <div id="{{platform}}_select" class="col-md-11"></div>
213 <div id="{{platform}}_add" class="row" style="display:none;">
214 <div class="col-md-1" style="padding-top:50px;">
215 <input type="hidden" name="action" id="action" value="add">
216 <input type="hidden" name="platform" id="platform" value="{{platform}}">
217 <input type="submit" form="{{platform}}_form_add" value="Add" onclick="this.form.submit();">
222 // display only if VMs already in slice
223 <form id="{{platform}}_form_delete" method="post">
225 <div id="{{platform}}_existing" class="row">
226 <input type="hidden" name="{{platform}}_vm" id="{{platform}}_vm">
227 <input type="hidden" name="action" id="action" value="delete">
228 <input type="hidden" name="platform" id="platform" value="{{platform}}">
232 // display only pending changes
234 <form id="{{platform}}_form_reserve" method="post">
236 <div id="{{platform}}_pending" class="row"></div>
237 <input type="hidden" name="action" id="action" value="reserve">
238 <input type="hidden" name="platform" id="platform" value="{{platform}}">
239 <input type="submit" form="{{platform}}_form_reserve" value="Reserve" onclick="this.form.submit();">