portal/templates/slice-tab-cloud.html

   1 {% extends "layout_wide.html" %}
   2
   3 {% block head %}
   4 <script type="text/javascript">
   5
   6 var global_list = {};
   7
   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"];
  13     return option;
  14 }
  15 function render_description(platform, obj, type){
  16     if($('#'+platform+'_'+type).length==0){
  17         $('#'+platform+'_add').append("<div id='"+platform+"_"+type+"'>");
  18     }
  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>");
  24     }
  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>");
  29             }
  30         });
  31     }
  32 }
  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" );
  39     $('#'+id).show();
  40 }
  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);
  61             });
  62         }
  63         var option = document.createElement("option");
  64         option.text = "-- select a flavor --";
  65         option.value = 0;
  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');
  83                     }
  84                     var option = document.createElement("option");
  85                     option.text = "-- select an image --";
  86                     option.value = 0;
  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']);
  95                         });
  96                     }else{
  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']);
 102                     }
 103                 }
 104
 105             }
 106         });
 107         elm.appendChild(selectFlavor);
 108         elm.appendChild(selectImage);
 109     }
 110     //$("#"+platform+"_selectFlavor").css("width","50%");
 111     //$("#"+platform+"_selectImage").css("width","50%");
 112 }
 113 function is_finished(len_platforms, pf_status){
 114     if(len_platforms == pf_status){
 115         return true;
 116     }else{
 117         return false;
 118     }
 119 }
 120 function send_delete(platform, sliver_name){
 121     jQuery('#'+platform+'_vm').val(sliver_name);
 122     jQuery('#'+platform+'_form_delete').submit();
 123 }
 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>");
 136         /*
 137         sliver['openstack:address']
 138         sliver['openstack:flavor']
 139         */
 140     }
 141 }
 142
 143 $(document).ready(function() {
 144     var data = Array();
 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 ) {
 151         console.log(data);
 152         if('parsed' in data['{{platform}}'] && 'rspec' in data['{{platform}}']['parsed']){
 153            rspec = data['{{platform}}']['parsed']['rspec'];
 154            if('node' in rspec){
 155                if(rspec['node'] instanceof Array) {
 156                    jQuery.each( rspec['node'], function( i, node ) {
 157                        render_node('{{platform}}',node);
 158                    });
 159                }else{
 160                    render_node('{{platform}}',rspec['node']);
 161                }
 162            }
 163         }
 164     });
 165     $.post("/sfa/ListResources",{'platform':['{{platform}}']}, function( d ) {
 166         $.extend(data,d);
 167         console.log(data);
 168         if('parsed' in data['{{platform}}'] && 'rspec' in data['{{platform}}']['parsed']){
 169            rspec = data['{{platform}}']['parsed']['rspec'];
 170            if('node' in rspec){
 171                if(rspec['node'] instanceof Array) {
 172                    jQuery.each( rspec['node'], function( i, node ) {
 173                        render_cloud('{{platform}}',node);
 174                    });
 175                }else{
 176                    render_cloud('{{platform}}',rspec['node']);
 177                }
 178            }else{
 179                platform_empty.push('{{platform}}');
 180            }
 181         }else{
 182             platform_empty.push('{{platform}}');
 183         }
 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();
 189             }
 190         }
 191     });
 192
 193     {% endif %}
 194 {% endfor %}
 195 });
 196 </script>
 197 {% endblock %}
 198
 199 {% block content %}
 200 {{post_values}}
 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">
 206         {% csrf_token %}
 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;">
 210             </div>
 211             <div id="{{platform}}_select" class="col-md-11"></div>
 212         </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();">
 218             </div>
 219         </div>
 220         </form>
 221         <br>
 222         // display only if VMs already in slice
 223         <form id="{{platform}}_form_delete" method="post">
 224         {% csrf_token %}
 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}}">
 229         </div>
 230         </form>
 231         <br>
 232         // display only pending changes
 233         <br>
 234         <form id="{{platform}}_form_reserve" method="post">
 235         {% csrf_token %}
 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();">
 240         </form>
 241     </div>
 242     {% endif %}
 243 {% endfor %}
 244 {% endblock %}