mirror of
				https://github.com/retspen/webvirtcloud
				synced 2025-07-31 12:41:08 +00:00 
			
		
		
		
	Instances overhaul
This commit is contained in:
		
							parent
							
								
									f23e6b000f
								
							
						
					
					
						commit
						47009d47ca
					
				
					 69 changed files with 5011 additions and 4127 deletions
				
			
		
							
								
								
									
										880
									
								
								instances/templates/create_instance_w2.html
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										880
									
								
								instances/templates/create_instance_w2.html
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,880 @@ | |||
| {% extends "base.html" %} | ||||
| {% load i18n %} | ||||
| {% load staticfiles %} | ||||
| {% load icons %} | ||||
| {% block title %}{% trans "Create new instance" %}{% endblock %} | ||||
| {% block style %} | ||||
|     <link href="{% static "css/bootstrap-multiselect.css" %}" rel="stylesheet"> | ||||
| {% endblock %} | ||||
| {% block content %} | ||||
|     <!-- Page Heading --> | ||||
|     <div class="row"> | ||||
|         <div class="col-lg-12"> | ||||
|             <h3 class="page-header"> | ||||
|                 {% blocktrans with host=compute.name %}New instance on {{ host }} {% endblocktrans %}</h3> | ||||
|             </h3> | ||||
|         </div> | ||||
|     </div> | ||||
|     <!-- /.row --> | ||||
|     {% include 'errors_block.html' %} | ||||
|     {% include 'pleasewaitdialog.html' %} | ||||
| 
 | ||||
| 
 | ||||
|     {% if form.errors %} | ||||
|     {% for field in form %} | ||||
|         {% for error in field.errors %} | ||||
|             <div class="alert alert-danger"> | ||||
|                 <strong>{{ error|escape }}</strong> | ||||
|             </div> | ||||
|         {% endfor %} | ||||
|     {% endfor %} | ||||
|     {% for error in form.non_field_errors %} | ||||
|         <div class="alert alert-danger"> | ||||
|             <strong>{{ error|escape }}</strong> | ||||
|         </div> | ||||
|     {% endfor %} | ||||
|     {% endif %} | ||||
| 
 | ||||
|     <div class="row" id="max-width-page"> | ||||
|         <div class="col-lg-12"> | ||||
|             <div role="tabpanel"> | ||||
|             <!-- Nav tabs --> | ||||
|                 <ul class="nav nav-tabs" role="tablist" aria-label="Instance create method"> | ||||
|                      <li class="nav-item"> | ||||
|                         <a class="nav-link  float-right" href="#" role="tab" data-toggle="tab" onclick="goto_compute()"> | ||||
|                             <span class="fa fa-arrow-left"></span> | ||||
|                         </a> | ||||
|                     </li> | ||||
|                     <li class="nav-item"> | ||||
|                         <a class="nav-link active"  href="#flavor" aria-controls="flavor" role="tab" data-toggle="tab"> | ||||
|                             {% trans "Flavor" %} | ||||
|                         </a> | ||||
|                     </li> | ||||
|                     <li class="nav-item"> | ||||
|                         <a class="nav-link" href="#addCustom" aria-controls="addCustom" role="tab" data-toggle="tab"> | ||||
|                             {% trans "Custom" %} | ||||
|                         </a> | ||||
|                     </li> | ||||
|                     <li class="nav-item"> | ||||
|                         <a class="nav-link" href="#addFromTemp" aria-controls="addFromTemp" role="tab" data-toggle="tab"> | ||||
|                             {% trans "Template" %} | ||||
|                         </a> | ||||
|                     </li> | ||||
|                 </ul> | ||||
|                 <!-- Tab panes --> | ||||
|                 <div class="tab-content"> | ||||
|                     <div role="tabpanel" class="tab-pane tab-pane-bordered active" id="flavor"> | ||||
|                         {% if not flavors %} | ||||
|                             <div class="col-lg-12"> | ||||
|                                 <div class="alert alert-warning alert-dismissable"> | ||||
|                                     <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> | ||||
|                                     <i class="fa fa-exclamation-triangle"></i> <strong>{% trans "Warning" %}:</strong> {% trans "Hypervisor doesn't have any Flavors" %} | ||||
|                                 </div> | ||||
|                             </div> | ||||
|                         {% else %} | ||||
|                             {% include 'create_flav_block.html' %} | ||||
|                             <h3 class="page-header">{% trans "Create from flavor" %}</h3> | ||||
|                             <div class="table-responsive"> | ||||
|                                 <table class="table table-hover"> | ||||
|                                 <thead> | ||||
|                                 <tr> | ||||
|                                     <th scope="col">#</th> | ||||
|                                     <th scope="col">{% trans "Name" %}</th> | ||||
|                                     <th scope="col">{% trans "VCPU" %}</th> | ||||
|                                     <th scope="col">{% trans "RAM" %}</th> | ||||
|                                     <th scope="col">{% trans "HDD" %}</th> | ||||
|                                     <th scope="colgroup" colspan="2">{% trans "Action" %}</th> | ||||
|                                 </tr> | ||||
|                                 </thead> | ||||
|                                 <tbody> | ||||
|                                 {% for flavor in flavors %} | ||||
|                                     <tr> | ||||
|                                         <td>{{ forloop.counter }}</td> | ||||
|                                         <td>{{ flavor.label }}</td> | ||||
|                                         <td>{{ flavor.vcpu }}</td> | ||||
|                                         <td>{{ flavor.memory }} {% trans "MB" %}</td> | ||||
|                                         <td>{{ flavor.disk }} {% trans "GB" %}</td> | ||||
|                                         <td style="width:5px;"> | ||||
|                                             <div class="modal fade" id="addVMflavor{{ forloop.counter }}" tabindex="-1" role="dialog" aria-labelledby="addVMFlavorLabel" aria-hidden="true"> | ||||
|                                                 <div class="modal-dialog"> | ||||
|                                                     <div class="modal-content"> | ||||
|                                                         <div class="modal-header"> | ||||
|                                                             <h5 class="modal-title">{% trans "Create Virtual Machine" %} ({{ flavor.label }})</h5> | ||||
|                                                             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> | ||||
|                                                         </div> | ||||
|                                                         <div class="modal-body"> | ||||
|                                                             <form method="post" role="form" aria-label="Create instance from flavor form">{% csrf_token %} | ||||
|                                                                 <div class="form-group row"> | ||||
|                                                                     <label class="col-sm-4 col-form-label">{% trans "Name" %}</label> | ||||
|                                                                     <div class="col-sm-7"> | ||||
|                                                                         <input type="text" class="form-control" name="name" | ||||
|                                                                                placeholder="{% trans "Name" %}" maxlength="64" required | ||||
|                                                                                pattern="[a-zA-Z0-9\.\-_]+"> | ||||
|                                                                         <input type="hidden" name="vcpu" value="{{ flavor.vcpu }}"> | ||||
|                                                                         <input type="hidden" name="memory" value="{{ flavor.memory }}"> | ||||
|                                                                         <input type="hidden" name="hdd_size" value="{{ flavor.disk }}"> | ||||
|                                                                     </div> | ||||
|                                                                 </div> | ||||
|                                                                 {% if firmwares %} | ||||
|                                                                 <div class="form-group row"> | ||||
|                                                                     <label class="col-sm-4 col-form-label">{% trans "Firmware" %}</label> | ||||
|                                                                     <div class="col-sm-7"> | ||||
|                                                                         <select class="form-control" id="select_firmware" name="firmware"> | ||||
|                                                                             {% for frm in firmwares %} | ||||
|                                                                             <option value="{{ frm }}" {% if frm in default_firmware %}selected{% endif %}>{{ frm }}</option> | ||||
|                                                                             {% endfor %} | ||||
|                                                                         </select> | ||||
|                                                                     </div> | ||||
|                                                                 </div> | ||||
|                                                                 {% endif %} | ||||
|                                                                 {% if dom_caps.cpu_modes %} | ||||
|                                                                 <div class="form-group row"> | ||||
|                                                                     <label class="col-sm-4 col-form-label">{% trans "VCPU Config" %}</label> | ||||
|                                                                     <div class="col-sm-7"> | ||||
|                                                                         <select class="form-control" id="vcpu_mode" name="vcpu_mode"> | ||||
|                                                                             <option value=""> {% trans 'no-mode' %}</option> | ||||
|                                                                             {% for mode in dom_caps.cpu_modes %} | ||||
|                                                                                 {% if mode == 'custom' %} | ||||
|                                                                                     <optgroup label="Custom CPU Models"> | ||||
|                                                                                         {% for model in dom_caps.cpu_custom_models %} | ||||
|                                                                                         <option value="{{ model }}"> {% trans model %}</option> | ||||
|                                                                                         {% endfor %} | ||||
|                                                                                     </optgroup> | ||||
|                                                                                 {% else %} | ||||
|                                                                                     <option value="{{ mode }}" {% if mode == default_cpu_mode %}selected {% endif %}> | ||||
|                                                                                         {% trans mode %} | ||||
|                                                                                     </option> | ||||
|                                                                                 {% endif %} | ||||
|                                                                             {% endfor %} | ||||
|                                                                         </select> | ||||
|                                                                     </div> | ||||
|                                                                 </div> | ||||
|                                                                 {% endif %} | ||||
|                                                                 <div class="form-group row"> | ||||
|                                                                     <label class="col-sm-4 col-form-label">{% trans "Storage" %}</label> | ||||
|                                                                     <div class="col-sm-7"> | ||||
|                                                                         <input type="hidden" name="cache_mode" value="default"> | ||||
|                                                                         <select class="form-control" name="storage"> | ||||
|                                                                             {% if storages %} | ||||
|                                                                                 {% for storage in storages %} | ||||
|                                                                                     <option value="{{ storage }}">{{ storage }}</option> | ||||
|                                                                                 {% endfor %} | ||||
|                                                                             {% else %} | ||||
|                                                                                 <option value="">{% trans "None" %}</option> | ||||
|                                                                             {% endif %} | ||||
|                                                                         </select> | ||||
|                                                                     </div> | ||||
|                                                                 </div> | ||||
|                                                                 <div class="form-group row"> | ||||
|                                                                     <label class="col-sm-4 col-form-label">{% trans "Network" %}</label> | ||||
|                                                                     <div class="col-sm-7"> | ||||
|                                                                         <select class="form-control" name="networks"> | ||||
|                                                                             {% for network in networks %} | ||||
|                                                                                 <option value="{{ network }}">{{ network }}</option> | ||||
|                                                                             {% endfor %} | ||||
|                                                                         </select> | ||||
|                                                                     </div> | ||||
|                                                                 </div> | ||||
|                                                                  <div class="form-group row"> | ||||
|                                                                     <label class="col-sm-4 col-form-label">{% trans "Advanced" %}</label> | ||||
|                                                                     <div class="col-sm-7"> | ||||
|                                                                         <button class="btn btn-block btn-outline-light" type="button" data-toggle="collapse" data-target="#flavAddCollapse" aria-expanded="false" aria-controls="collapseExample"> | ||||
|                                                                             <span class="fa fa-caret-down"></span> | ||||
|                                                                         </button> | ||||
|                                                                     </div>         | ||||
|                                                                 </div> | ||||
|                                                                 <div class="collapse" id="flavAddCollapse"> | ||||
|                                                                     <div class="form-group row"> | ||||
|                                                                         <label class="col-sm-4 col-form-label">{% trans "NWFilter" %}</label> | ||||
|                                                                         <div class="col-sm-7"> | ||||
|                                                                             <select class="form-control" name="nwfilter"> | ||||
|                                                                                 <option value="">{% trans "None" %}</option> | ||||
|                                                                                 {% for nwfilter in nwfilters %} | ||||
|                                                                                     <option value="{{ nwfilter }}">{{ nwfilter }}</option> | ||||
|                                                                                 {% endfor %} | ||||
|                                                                             </select> | ||||
|                                                                         </div> | ||||
|                                                                     </div> | ||||
|                                                                     <div class="form-group row"> | ||||
|                                                                         <label class="col-sm-4 col-form-label">{% trans "HDD cache mode" %}</label> | ||||
|                                                                         <div class="col-sm-7"> | ||||
|                                                                             <select class="form-control" id="cache_mode" name="cache_mode"> | ||||
|                                                                                 {% for mode, name in cache_modes %} | ||||
|                                                                                     <option value="{{ mode }}" {% if mode == default_cache %}selected {% endif %}> | ||||
|                                                                                     {% trans name %}</option> | ||||
|                                                                                 {% endfor %} | ||||
|                                                                             </select> | ||||
|                                                                         </div> | ||||
|                                                                     </div> | ||||
|                                                                     <div class="form-group row"> | ||||
|                                                                         <label class="col-sm-4 col-form-label">{% trans "MAC" %}</label> | ||||
|                                                                         <div class="col-sm-7"> | ||||
|                                                                             <input type="text" class="form-control" name="mac" maxlength="17" value="{{ mac_auto }}" required pattern="[a-zA-Z0-9:]+"> | ||||
|                                                                         </div> | ||||
|                                                                     </div> | ||||
|                                                                     {% if dom_caps.graphics_support == 'yes' %} | ||||
|                                                                     <div class="form-group row"> | ||||
|                                                                         <label class="col-sm-4 col-form-label">{% trans "Graphics" %}</label> | ||||
|                                                                         <div class="col-sm-7"> | ||||
|                                                                             <select class="form-control" name="graphics"> | ||||
|                                                                                 {% for graphics in dom_caps.graphics_types %} | ||||
|                                                                                 <option value="{{ graphics }}" {% if default_graphics == graphics %}selected{% endif %}>{{ graphics }}</option> | ||||
|                                                                                 {% endfor %} | ||||
|                                                                             </select> | ||||
|                                                                         </div> | ||||
|                                                                     </div> | ||||
|                                                                     {% endif %} | ||||
|                                                                     <div class="form-group row"> | ||||
|                                                                         <label class="col-sm-4 col-form-label">{% trans "Video" %}</label> | ||||
|                                                                         <div class="col-sm-7"> | ||||
|                                                                             <select class="form-control" name="video"> | ||||
|                                                                                 {% if not videos %} | ||||
|                                                                                     <option value="vga">vga</option> | ||||
|                                                                                     <option value="cirrus">cirrus</option> | ||||
|                                                                                 {% endif %} | ||||
|                                                                                 {% for video in videos %} | ||||
|                                                                                     <option value="{{ video }}">{{ video }}</option> | ||||
|                                                                                 {% endfor %} | ||||
|                                                                             </select> | ||||
|                                                                         </div> | ||||
|                                                                     </div> | ||||
|                                                                     <div class="form-group row"> | ||||
|                                                                         <label class="col-sm-4 col-form-label">{% trans "Console Access" %}</label> | ||||
|                                                                         <div class="col-sm-7"> | ||||
|                                                                             <select class="custom-select" name="listener_addr"> | ||||
|                                                                                 {% for addr, label in listener_addr %} | ||||
|                                                                                     <option value="{{ addr }}" {% if addr == "0.0.0.0" %} selected {% endif %}>{{ label }}</option> | ||||
|                                                                                 {% endfor %} | ||||
|                                                                             </select> | ||||
|                                                                         </div> | ||||
|                                                                     </div> | ||||
|                                                                     <div class="form-group row"> | ||||
|                                                                         <label class="col-sm-4 col-form-label">{% trans "Console Password" %}</label> | ||||
|                                                                         <div class="col-sm-7"> | ||||
|                                                                             <input class="form-control" type="password" name="console_pass" placeholder="{% trans "Console Password" %}" maxlength="64"> | ||||
|                                                                         </div> | ||||
|                                                                     </div> | ||||
|                                                                     <div class="form-group row"> | ||||
|                                                                         <label class="col-sm-4 col-form-label">{% trans "Guest Agent" %}</label> | ||||
|                                                                         <div class="col-sm-7"> | ||||
|                                                                             <input type="checkbox" name="qemu_ga" value="true" checked> | ||||
|                                                                         </div> | ||||
|                                                                     </div> | ||||
|                                                                     {% if virtio_support %} | ||||
|                                                                     <div class="form-group row"> | ||||
|                                                                         <label class="col-sm-4 col-form-label">{% trans "VirtIO" %}</label> | ||||
|                                                                         <div class="col-sm-7"> | ||||
|                                                                             <input type="checkbox" name="virtio" value="{{ virtio_support }}" checked> | ||||
|                                                                         </div> | ||||
|                                                                     </div> | ||||
|                                                                     {% endif %} | ||||
|                                                                 </div> | ||||
|                                                         </div> | ||||
|                                                         <div class="modal-footer"> | ||||
|                                                             <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans "Close" %}</button> | ||||
|                                                             {% if storages %} | ||||
|                                                                 <button type="submit" class="btn btn-primary" name="create">{% trans "Create" %}</button> | ||||
|                                                             {% else %} | ||||
|                                                                 <button class="btn btn-primary disabled">{% trans "Create" %}</button> | ||||
|                                                             {% endif %} | ||||
|                                                         </div> | ||||
|                                                             </form> | ||||
|                                                     </div> | ||||
|                                                 </div> | ||||
|                                             </div> | ||||
|                                             <a data-toggle="modal" href="#addVMflavor{{ forloop.counter }}" class="btn btn-sm btn-secondary"> | ||||
|                                                 <span class="fa fa-plus"></span> | ||||
|                                             </a> | ||||
|                                         </td> | ||||
|                                         <td style="width:5px;"> | ||||
|                                             <form action="{% url 'instances:flavor_delete' flavor.id %}" method="post" role="form" aria-label="Delete flavor form"> | ||||
|                                                 {% csrf_token %} | ||||
|                                                 <button type="submit" class="btn btn-sm btn-secondary" name="delete_flavor" onclick="return confirm('{% trans "Are you sure?" %}')"> | ||||
|                                                     {% icon 'trash' %} | ||||
|                                                 </button> | ||||
|                                             </form> | ||||
|                                         </td> | ||||
|                                     </tr> | ||||
|                                 {% endfor %} | ||||
|                                 </tbody> | ||||
|                             </table> | ||||
|                         </div> | ||||
|                         {% endif %} | ||||
|                         <div class="clearfix"></div> | ||||
|                     </div> | ||||
| 
 | ||||
|             <div role="tabpanel" class="tab-pane tab-pane-bordered" id="addCustom"> | ||||
|                 <div> | ||||
|                     <form method="post" role="form" aria-label="Create custom instance form">{% csrf_token %} | ||||
|                     <div class="form-group row"> | ||||
|                         <label class="col-sm-3 col-form-label">{% trans "Name" %}</label> | ||||
|                         <div class="col-sm-7"> | ||||
|                             <input type="text" class="form-control" name="name" placeholder="{% trans "Name" %}" maxlength="64" required pattern="[a-zA-Z0-9\.\-_]+"> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                     {% if firmwares %} | ||||
|                         <div class="form-group row"> | ||||
|                             <label class="col-sm-3 col-form-label">{% trans "Firmware" %}</label> | ||||
|                             <div class="col-sm-7"> | ||||
|                                 <select class="custom-select" id="select_firmware" name="firmware"> | ||||
|                                     {% for frm in firmwares %} | ||||
|                                     <option value="{{ frm }}" {% if frm == default_firmware %}selected{% endif %}>{{ frm }}</option> | ||||
|                                     {% endfor %} | ||||
|                                 </select> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                     {% endif %} | ||||
|                     <div class="form-group row"> | ||||
|                         <label class="col-sm-3 col-form-label">{% trans "VCPU" %}</label> | ||||
|                         <div class="col-sm-7"> | ||||
|                             <input type="text" class="form-control" name="vcpu" value="1" maxlength="2" required pattern="[0-9]"> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                     {% if dom_caps.cpu_modes %} | ||||
|                      <div class="form-group row"> | ||||
|                         <label class="col-sm-3 col-form-label">{% trans "VCPU Config" %}</label> | ||||
|                         <div class="col-sm-7"> | ||||
|                             <select id="vcpu_mode" name="vcpu_mode" class="custom-select"> | ||||
|                                 <option value=""> {% trans 'no-mode' %}</option> | ||||
|                                 {% for mode in dom_caps.cpu_modes %} | ||||
|                                     {% if mode == 'custom' %} | ||||
|                                         <optgroup label="Custom CPU Models"> | ||||
|                                             {% for model in dom_caps.cpu_custom_models %} | ||||
|                                             <option value="{{ model }}"> {% trans model %}</option> | ||||
|                                             {% endfor %} | ||||
|                                         </optgroup> | ||||
|                                     {% else %} | ||||
|                                         <option value="{{ mode }}" {% if mode == default_cpu_mode %}selected {% endif %}> | ||||
|                                             {% trans mode %} | ||||
|                                         </option> | ||||
|                                     {% endif %} | ||||
|                                 {% endfor %} | ||||
|                             </select> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                     {% endif %} | ||||
|                     <div class="form-group row"> | ||||
|                         <label class="col-sm-3 col-form-label">{% trans "RAM" %}</label> | ||||
|                         <div class="col-sm-7"> | ||||
|                             <input type="text" class="form-control" name="memory" value="512" maxlength="5" required pattern="[0-9]+"> | ||||
|                         </div> | ||||
|                         <label class="col-sm-1 col-form-label">{% trans "MB" %}</label> | ||||
|                     </div> | ||||
|                     <div id="disk_list_div" class="form-group row d-none"> | ||||
|                         <label id="added_disks" class="col-sm-3 col-form-label">{% trans "Added Disks" %}</label> | ||||
|                         <div class="col-sm-7"> | ||||
|                          <ul id="img-list" class="form-group row"> | ||||
|                               <!-- populated from javascript --> | ||||
|                           </ul> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                     <div class="form-group row"> | ||||
|                         <label class="col-sm-3 col-form-label">{% trans "HDD" %}</label> | ||||
|                         <input id="images" name="images" type="hidden" value=""/> | ||||
|                         <div class="col-sm-3"> | ||||
|                             <select id="storage-control" name="storage-control" class="form-control" onchange="get_cust_vols({{ compute_id }}, value);"> | ||||
|                                 {% if storages %} | ||||
|                                     <option value disabled selected>{% trans "Select pool" %}...</option> | ||||
|                                     {% for storage in storages %} | ||||
|                                         <option value="{{ storage }}" >{{ storage }}</option> | ||||
|                                     {% endfor %} | ||||
|                                 {% else %} | ||||
|                                     <option value="">{% trans "None" %}</option> | ||||
|                                 {% endif %} | ||||
|                             </select> | ||||
|                         </div> | ||||
|                         <div class="col-sm-4"> | ||||
|                             <select id="image-control" class="form-control" name="image-control" multiple="multiple"> | ||||
|                                 <!-- populated from javascript --> | ||||
|                             </select> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                     <div class="form-group row"> | ||||
|                         <label class="col-sm-3 col-form-label">{% trans "Network" %}</label> | ||||
|                         <div class="col-sm-7"> | ||||
|                             <ul id="net-list"> | ||||
|                                 <!-- populated from javascript --> | ||||
|                             </ul> | ||||
|                             <input id="networks" type="hidden" name="networks" value=""/> | ||||
|                             <select id="network-control" name="network-control" class="form-control" multiple="multiple"> | ||||
|                                 {% for network in networks %} | ||||
|                                     <option value="{{ network }}">{{ network }}</option> | ||||
|                                 {% endfor %} | ||||
|                             </select> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                     <div class="form-group row"> | ||||
|                         <label class="col-sm-3 col-form-label">{% trans "Advanced" %}</label> | ||||
|                         <div class="col-sm-7"> | ||||
|                             <button class="btn btn-block btn-outline-light" type="button" data-toggle="collapse" data-target="#customAdvCollapse" aria-expanded="false" aria-controls="collapseExample"> | ||||
|                                 <span class="fa fa-caret-down"></span> | ||||
|                             </button> | ||||
|                         </div>         | ||||
|                     </div> | ||||
|                     <div class="collapse" id="customAdvCollapse"> | ||||
|                         <div class="form-group row meta-prealloc"> | ||||
|                             <label class="col-sm-3 col-form-label">{% trans "Disk Metadata" %}</label> | ||||
|                             <div class="col-sm-7"> | ||||
|                                 <input type="checkbox" name="meta_prealloc" title="{% trans "Metadata preallocation" %}" value="true"> | ||||
|                             </div> | ||||
|                             <label class="col-lg-1 col-form-label">{% trans "Image" %}</label> | ||||
|                         </div> | ||||
|                         <div class="form-group row"> | ||||
|                             <label class="col-sm-3 col-form-label">{% trans "HDD Cache Mode" %}</label> | ||||
|                             <div class="col-sm-7"> | ||||
|                                 <select id="cache_mode" name="cache_mode" class="form-control"> | ||||
|                                     {% for mode, name in cache_modes %} | ||||
|                                         <option value="{{ mode }}" {% if mode == default_cache %}selected {% endif %}> | ||||
|                                             {% trans name %}</option> | ||||
|                                     {% endfor %} | ||||
|                                 </select> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                         <div class="form-group row"> | ||||
|                             <label class="col-sm-3 col-form-label">{% trans "NWFilter" %}</label> | ||||
|                             <div class="col-sm-7"> | ||||
|                                 <select name="nwfilter" class="custom-select"> | ||||
|                                     <option value="">{% trans "None" %}</option> | ||||
|                                     {% for nwfilter in nwfilters %} | ||||
|                                         <option value="{{ nwfilter }}">{{ nwfilter }}</option> | ||||
|                                     {% endfor %} | ||||
|                                 </select> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                         {% if dom_caps.graphics_support == 'yes' %} | ||||
|                             <div class="form-group row"> | ||||
|                                 <label class="col-sm-3 col-form-label">{% trans "Graphics" %}</label> | ||||
|                                 <div class="col-sm-7"> | ||||
|                                     <select name="graphics" class="custom-select"> | ||||
|                                         {% for graphics in dom_caps.graphics_types %} | ||||
|                                         <option value="{{ graphics }}" {% if default_graphics == graphics %}selected{% endif %}>{{ graphics }}</option> | ||||
|                                         {% endfor %} | ||||
|                                     </select> | ||||
|                                 </div> | ||||
|                             </div> | ||||
|                         {% endif %} | ||||
|                         <div class="form-group row"> | ||||
|                             <label class="col-sm-3 col-form-label">{% trans "Video" %}</label> | ||||
|                             <div class="col-sm-7"> | ||||
|                                 <select name="video" class="custom-select"> | ||||
|                                     {% if not videos %} | ||||
|                                         <option value="vga">vga</option> | ||||
|                                         <option value="cirrus">cirrus</option> | ||||
|                                     {% endif %} | ||||
|                                     {% for video in videos %} | ||||
|                                         <option value="{{ video }}">{{ video }}</option> | ||||
|                                     {% endfor %} | ||||
|                                 </select> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                         <div class="form-group row"> | ||||
|                             <label class="col-sm-3 col-form-label">{% trans "Console Access" %}</label> | ||||
|                             <div class="col-sm-7"> | ||||
|                                 <select name="listener_addr" class="custom-select"> | ||||
|                                     {% for addr, label in listener_addr %} | ||||
|                                         <option value="{{ addr }}" {% if addr == "0.0.0.0" %} selected {% endif %}>{{ label }}</option> | ||||
|                                     {% endfor %} | ||||
|                                 </select> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                         <div class="form-group row"> | ||||
|                             <label class="col-sm-3 col-form-label">{% trans "Console Password" %}</label> | ||||
|                             <div class="col-sm-7"> | ||||
|                                 <input type="password" class="form-control" name="console_pass" placeholder="{% trans "Console Password" %}" maxlength="64"> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                         <div class="form-group row"> | ||||
|                             <label class="col-sm-3 col-form-label">{% trans "Guest Agent" %}</label> | ||||
|                             <div class="col-sm-6"> | ||||
|                                 <input type="checkbox" name="qemu_ga" value="true" checked> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                         {% if virtio_support %} | ||||
|                         <div class="form-group row"> | ||||
|                             <label class="col-sm-3 col-form-label">{% trans "VirtIO" %}</label> | ||||
|                             <div class="col-sm-6"> | ||||
|                                 <input type="checkbox" name="virtio" value="{{ virtio_support }}" checked> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                         {% endif %} | ||||
|                     </div> | ||||
|                     <div class="form-group row"> | ||||
|                         <div class="col-sm-7 offset-3"> | ||||
|                         {% if storages %} | ||||
|                             <button type="submit" class="btn btn-block btn-primary" name="create" formnovalidate onclick="showPleaseWaitDialog()" value="1"> | ||||
|                                 {% trans "Create" %} | ||||
|                             </button> | ||||
|                         {% else %} | ||||
|                             <button class="btn btn-block btn-primary disabled"> | ||||
|                                 {% trans "Create" %} | ||||
|                             </button> | ||||
|                         {% endif %} | ||||
|                         </div> | ||||
|                     </div> | ||||
|                 </form> | ||||
|                 </div> | ||||
|                 <div class="clearfix"></div> | ||||
|             </div> | ||||
| 
 | ||||
|             <div role="tabpanel" class="tab-pane tab-pane-bordered" id="addFromTemp"> | ||||
|                 <div> | ||||
|                     <form method="post" role="form" aria-label="Create instance from template form">{% csrf_token %} | ||||
|                         <div class="form-group row"> | ||||
|                             <label class="col-sm-3 col-form-label">{% trans "Name" %}</label> | ||||
|                             <div class="col-sm-7"> | ||||
|                                 <input type="text" class="form-control" name="name" placeholder="{% trans "Name" %}" maxlength="64" required pattern="[a-zA-Z0-9\.\-_]+"> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                         {% if firmwares %} | ||||
|                             <div class="form-group row"> | ||||
|                                 <label class="col-sm-3 col-form-label">{% trans "Firmware" %}</label> | ||||
|                                 <div class="col-sm-7"> | ||||
|                                     <select class="custom-select" id="select_firmware" name="firmware"> | ||||
|                                         {% for frm in firmwares %} | ||||
|                                         <option value="{{ frm }}" {% if frm == default_firmware %}selected{% endif %}>{{ frm }}</option> | ||||
|                                         {% endfor %} | ||||
|                                     </select> | ||||
|                                 </div> | ||||
|                             </div> | ||||
|                         {% endif %} | ||||
|                         <div class="form-group row"> | ||||
|                             <label class="col-sm-3 col-form-label">{% trans "VCPU" %}</label> | ||||
|                             <div class="col-sm-7"> | ||||
|                                 <input type="text" class="form-control" name="vcpu" value="1" maxlength="2" required pattern="[0-9]"> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                         <div class="form-group row"> | ||||
|                             <label class="col-sm-3 col-form-label">{% trans "VCPU Config" %}</label> | ||||
|                             <div class="col-sm-7"> | ||||
|                                 <select id="vcpu_mode" name="vcpu_mode" class="custom-select"> | ||||
|                                     <option value=""> {% trans 'no-mode' %}</option> | ||||
|                                     {% for mode in dom_caps.cpu_modes %} | ||||
|                                         {% if mode == 'custom' %} | ||||
|                                             <optgroup label="Custom CPU Models"> | ||||
|                                                 {% for model in dom_caps.cpu_custom_models %} | ||||
|                                                 <option value="{{ model }}"> {% trans model %}</option> | ||||
|                                                 {% endfor %} | ||||
|                                             </optgroup> | ||||
|                                         {% else %} | ||||
|                                             <option value="{{ mode }}" {% if mode == default_cpu_mode %}selected{% endif %}> | ||||
|                                                 {% trans mode %} | ||||
|                                             </option> | ||||
|                                         {% endif %} | ||||
|                                     {% endfor %} | ||||
|                                 </select> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                         <div class="form-group row"> | ||||
|                             <label class="col-sm-3 col-form-label">{% trans "RAM" %}</label> | ||||
|                             <div class="col-sm-7"> | ||||
|                                 <input type="text" class="form-control" name="memory" value="512" maxlength="5" required pattern="[0-9]+"> | ||||
|                             </div> | ||||
|                             <label class="col-sm-1 col-form-label">{% trans "MB" %}</label> | ||||
|                         </div> | ||||
|                         <div class="form-group row"> | ||||
|                             <label class="col-sm-3 col-form-label">{% trans "Template Disk" %}</label> | ||||
|                             <input id="images" name="images" type="hidden" value=""/> | ||||
|                             <div class="col-sm-3"> | ||||
|                                 <select class="custom-select" onchange="get_template_vols({{ compute_id }}, value);"> | ||||
|                                     {% if storages %} | ||||
|                                         <option value disabled selected>{% trans "Select pool" %}...</option> | ||||
|                                         {% for storage in storages %} | ||||
|                                             <option value="{{ storage }}" >{{ storage }}</option> | ||||
|                                         {% endfor %} | ||||
|                                     {% else %} | ||||
|                                         <option value="">{% trans "None" %}</option> | ||||
|                                     {% endif %} | ||||
|                                 </select> | ||||
|                             </div> | ||||
|                             <div class="col-sm-4"> | ||||
|                                 <select id="template" class="form-control" name="template" disabled> | ||||
|                                     <!-- populated from javascript --> | ||||
|                                 </select> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                         <div class="form-group row"> | ||||
|                             <label class="col-sm-3 col-form-label">{% trans "Storage" %}</label> | ||||
|                             <div class="col-sm-7"> | ||||
|                                 <select id="storage" name="storage" class="form-control" disabled> | ||||
|                                     {% if storages %} | ||||
|                                         {% for storage in storages %} | ||||
|                                             <option value="{{ storage }}" >{{ storage }}</option> | ||||
|                                         {% endfor %} | ||||
|                                     {% else %} | ||||
|                                         <option value="">{% trans "None" %}</option> | ||||
|                                     {% endif %} | ||||
|                                 </select> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                         <div class="form-group row"> | ||||
|                             <label class="col-sm-3 col-form-label">{% trans "Network" %}</label> | ||||
|                             <div class="col-sm-7"> | ||||
|                                 <select name="networks" class="custom-select"> | ||||
|                                     {% for network in networks %} | ||||
|                                         <option value="{{ network }}">{{ network }}</option> | ||||
|                                     {% endfor %} | ||||
|                                 </select> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                         <div class="form-group row"> | ||||
|                             <label class="col-sm-3 col-form-label">{% trans "Advanced" %}</label> | ||||
|                             <div class="col-sm-7"> | ||||
|                                 <button class="btn btn-block btn-outline-light" type="button" data-toggle="collapse" data-target="#tempAdvCollapse" aria-expanded="false" aria-controls="collapseExample"> | ||||
|                                     <span class="fa fa-caret-down"></span> | ||||
|                                 </button> | ||||
|                             </div>         | ||||
|                         </div> | ||||
|                         <div class="collapse" id="tempAdvCollapse"> | ||||
|                             <div class="form-group row meta-prealloc"> | ||||
|                                 <label class="col-sm-3 col-form-label">{% trans "Disk Metadata" %}</label> | ||||
|                                 <div class="col-sm-7"> | ||||
|                                     <input type="checkbox" name="meta_prealloc" title="{% trans "Metadata preallocation" %}" value="true"> | ||||
|                                 </div> | ||||
|                                 <label class="col-lg-1 col-form-label">{% trans "Image" %}</label> | ||||
|                             </div> | ||||
|                             <div class="form-group row"> | ||||
|                                 <label class="col-sm-3 col-form-label">{% trans "HDD cache mode" %}</label> | ||||
|                                 <div class="col-sm-7"> | ||||
|                                     <select id="cache_mode" name="cache_mode" class="custom-select"> | ||||
|                                         {% for mode, name in cache_modes %} | ||||
|                                             <option value="{{ mode }}" {% if mode == default_cache %}selected{% endif %}> | ||||
|                                             {% trans name %}</option> | ||||
|                                         {% endfor %} | ||||
|                                     </select> | ||||
|                                 </div> | ||||
|                             </div> | ||||
|                             <div class="form-group row"> | ||||
|                                 <label class="col-sm-3 col-form-label">{% trans "NWFilter" %}</label> | ||||
|                                 <div class="col-sm-7"> | ||||
|                                     <select name="nwfilter" class="custom-select"> | ||||
|                                         <option value="">{% trans "None" %}</option> | ||||
|                                         {% for nwfilter in nwfilters %} | ||||
|                                             <option value="{{ nwfilter }}">{{ nwfilter }}</option> | ||||
|                                         {% endfor %} | ||||
|                                     </select> | ||||
|                                 </div> | ||||
|                             </div> | ||||
|                             {% if dom_caps.graphics_support == 'yes' %} | ||||
|                             <div class="form-group row"> | ||||
|                                 <label class="col-sm-3 col-form-label">{% trans "Graphics" %}</label> | ||||
|                                 <div class="col-sm-7"> | ||||
|                                     <select name="graphics" class="custom-select"> | ||||
|                                         {% for graphics in dom_caps.graphics_types %} | ||||
|                                         <option value="{{ graphics }}" {% if default_graphics == graphics %}selected{% endif %}>{{ graphics }}</option> | ||||
|                                         {% endfor %} | ||||
|                                     </select> | ||||
|                                 </div> | ||||
|                             </div> | ||||
|                             {% endif %} | ||||
|                             <div class="form-group row"> | ||||
|                                 <label class="col-sm-3 col-form-label">{% trans "Video" %}</label> | ||||
|                                 <div class="col-sm-7"> | ||||
|                                     <select name="video" class="custom-select"> | ||||
|                                         {% if not videos %} | ||||
|                                             <option value="vga">vga</option> | ||||
|                                             <option value="cirrus">cirrus</option> | ||||
|                                         {% endif %} | ||||
|                                         {% for video in videos %} | ||||
|                                             <option value="{{ video }}">{{ video }}</option> | ||||
|                                         {% endfor %} | ||||
|                                     </select> | ||||
|                                 </div> | ||||
|                             </div> | ||||
|                             <div class="form-group row"> | ||||
|                                 <label class="col-sm-3 col-form-label">{% trans "Console Access" %}</label> | ||||
|                                 <div class="col-sm-7"> | ||||
|                                     <select name="listener_addr" class="custom-select"> | ||||
|                                         {% for addr, label in listener_addr %} | ||||
|                                             <option value="{{ addr }}" {% if addr == "0.0.0.0" %} selected {% endif %}>{{ label }}</option> | ||||
|                                         {% endfor %} | ||||
|                                     </select> | ||||
|                                 </div> | ||||
|                             </div> | ||||
|                             <div class="form-group row"> | ||||
|                                 <label class="col-sm-3 col-form-label">{% trans "Console Password" %}</label> | ||||
|                                 <div class="col-sm-7"> | ||||
|                                     <input type="password" class="form-control" name="console_pass" placeholder="{% trans "Console Password" %}" maxlength="64"> | ||||
|                                 </div> | ||||
|                             </div> | ||||
|                             <div class="form-group row"> | ||||
|                                 <label class="col-sm-3 col-form-label">{% trans "Guest Agent" %}</label> | ||||
|                                 <div class="col-sm-6"> | ||||
|                                     <input type="checkbox" name="qemu_ga" value="true" checked> | ||||
|                                 </div> | ||||
|                             </div> | ||||
|                             {% if virtio_support %} | ||||
|                             <div class="form-group row"> | ||||
|                                 <label class="col-sm-3 col-form-label">{% trans "VirtIO" %}</label> | ||||
|                                 <div class="col-sm-6"> | ||||
|                                     <input type="checkbox" name="virtio" value="{{ virtio_support }}" checked> | ||||
|                                 </div> | ||||
|                             </div> | ||||
|                             {% endif %} | ||||
|                         </div> | ||||
|                         <div class="form-group row"> | ||||
|                             <div class="col-sm-7 offset-3"> | ||||
|                             {% if storages %} | ||||
|                                 <button type="submit" class="btn btn-block btn-primary" name="create" value="1" formnovalidate onclick="showPleaseWaitDialog()"> | ||||
|                                     {% trans "Create" %} | ||||
|                                 </button> | ||||
|                             {% else %} | ||||
|                                 <button class="btn btn-primary disabled"> | ||||
|                                     {% trans "Create" %} | ||||
|                                 </button> | ||||
|                             {% endif %} | ||||
|                             </div> | ||||
|                         </div> | ||||
|                     </form> | ||||
|                 </div> | ||||
|                 <div class="clearfix"></div> | ||||
|             </div> | ||||
|         </div><!-- /Tab panes --> | ||||
|     </div> | ||||
| 
 | ||||
| {% endblock %} | ||||
| {% block script %} | ||||
| <script src="{% static "js/bootstrap-multiselect.js" %}"></script> | ||||
| <script> | ||||
|     function toggleValue(string, updated_value, checked) { | ||||
|         let result = ''; | ||||
|         if (checked) { | ||||
|             result = string; | ||||
|             if (result != '') result += ','; | ||||
|             result += updated_value; | ||||
|         } else { | ||||
|             $.each(string.split(','), function (index, value) { | ||||
|                 if (value == updated_value) return; | ||||
|                 if (result != '') result += ','; | ||||
|                 result += value; | ||||
|             }); | ||||
|         } | ||||
|         return result; | ||||
|     } | ||||
| 
 | ||||
|     $(document).ready(function () { | ||||
|           $('#image-control').multiselect({ | ||||
|             disableIfEmpty: true, | ||||
|             enableCaseInsensitiveFiltering: true, | ||||
|             maxHeight: 400, | ||||
|             inheritClass: true, | ||||
|             buttonWidth:function (options, select) { | ||||
|                 return '100%'; | ||||
|             }, | ||||
|             buttonText: function (options, select) { | ||||
|                 return 'Add image...'; | ||||
|             }, | ||||
|             buttonTitle: function (options, select) { | ||||
|                 return ''; | ||||
|             }, | ||||
|             onChange: function (element, checked) { | ||||
|                 let input_value = toggleValue($('#images').val(), element.val(), checked); | ||||
|                 $('#images').val(input_value); | ||||
| 
 | ||||
|                 let selected_list_html = ''; | ||||
|                 let counter = 0; | ||||
|                 if (input_value != '') { | ||||
|                        $('#disk_list_div').removeClass('d-none'); | ||||
|                        $.each(input_value.split(','), function (index, value) { | ||||
|                             var li = '<li>hdd' + counter + ' - ' + | ||||
|                                 '<select name="device' + counter + '" class="image-format" onchange="get_disk_bus_choices({{ compute_id }},' + counter + ', value);">' + | ||||
|                                     '{% for dev in disk_devices %}' + | ||||
|                                         '<option value=' + '"{{ dev }}">' + '{% trans dev %}</option>' + | ||||
|                                     '{% endfor %}' + | ||||
|                                 '</select>' + | ||||
|                                 '<select id="bus' + counter + '" name="bus' + counter + '" class="image-format">' + | ||||
|                                     '{% for bus in disk_buses %}' + | ||||
|                                         '<option value=' + '"{{ bus }}"' + | ||||
|                                             '{% if bus == default_bus %}selected{% endif %}>' + | ||||
|                                                '{% trans bus %}</option>' + | ||||
|                                     '{% endfor %}' + | ||||
|                                 '</select>' + | ||||
|                                 ' -> ' + value + ' ' + | ||||
|                                 '<a class="btn-link float-right" onclick="javascript:$(\'#image-control\').multiselect(\'deselect\', \'' + value + '\', true)"><i class="fa fa-remove"></i></a></li>'; | ||||
|                         selected_list_html += li; | ||||
|                         counter++; | ||||
|                     }); | ||||
|                 }else { | ||||
|                     $('#disk_list_div').addClass('d-none'); | ||||
|                 } | ||||
|                 $('#img-list').html(selected_list_html); | ||||
|             } | ||||
|         }); | ||||
| 
 | ||||
| 
 | ||||
|         $('#network-control').multiselect({ | ||||
|             inheritClass: true, | ||||
|             buttonText: function (options, select) { | ||||
|                 return 'Add network'; | ||||
|             }, | ||||
|             buttonTitle: function (options, select) { | ||||
|                 return ''; | ||||
|             }, | ||||
|             buttonWidth:function (options, select) { | ||||
|                 return '100%'; | ||||
|             }, | ||||
|             onChange: function (element, checked) { | ||||
|                 let input_value = toggleValue($('#networks').val(), element.val(), checked); | ||||
|                 $('#networks').val(input_value); | ||||
|                 let selected_list_html = ''; | ||||
|                 let counter = 0; | ||||
|                 if (input_value != '') { | ||||
|                     $.each(input_value.split(','), function (index, value) { | ||||
|                         let li = '<li>eth' + counter + | ||||
|                                 ' -> ' + value + ' ' + | ||||
|                                 '<a class="btn-link float-right" onclick="$(\'#network-control\').multiselect(\'deselect\', \'' + value + '\', true)"><i class="fa fa-remove"></i></a></li>'; | ||||
|                         selected_list_html += li; | ||||
|                         counter++; | ||||
|                     }); | ||||
|                 } | ||||
|                 $('#net-list').html(selected_list_html); | ||||
|             } | ||||
|         }); | ||||
|     }); | ||||
| 
 | ||||
|     $("id[vcpu_mode]").multiselect(); | ||||
| 
 | ||||
|     function get_cust_vols(compute_id, pool) { | ||||
|         get_vol_url = "/computes/" + compute_id + "/storage/" + pool + "/volumes"; | ||||
|         $.getJSON(get_vol_url, function (data) { | ||||
|             $("#image-control").find('option').remove(); | ||||
|             $.each(data['vols'], function(i, item) { | ||||
|                 $("#image-control").append('<option value=' + item +'>' + item + '</option>'); | ||||
|             }); | ||||
|             $('#image-control').multiselect('rebuild'); | ||||
|         }); | ||||
|     } | ||||
| 
 | ||||
|     function get_template_vols(compute_id, pool) { | ||||
|         get_vol_url = "/computes/" + compute_id + "/storage/" + pool + "/volumes"; | ||||
|         $.getJSON(get_vol_url, function (data) { | ||||
|             $("#template").find('option').remove(); | ||||
|             $.each(data['vols'], function(i, item) { | ||||
|                 $("#template").append('<option value=' + item +'>' + item + '</option>'); | ||||
|             }); | ||||
|         }); | ||||
|         $("#template").removeAttr("disabled"); | ||||
|         $("#storage").val(pool).change(); | ||||
|         $("#storage").removeAttr("disabled"); | ||||
|     } | ||||
| 
 | ||||
|     function get_disk_bus_choices(compute_id, dev_idx, disk_type){ | ||||
|         let arch = $('select[name="arch"]').val(); | ||||
|         let machine = $("select[id='machine-control']").val(); | ||||
|         get_diskBus_url = "/computes/" + compute_id + "/archs/" + arch + "/machines/" + machine + "/disks/" + disk_type + "/buses"; | ||||
|         $.getJSON(get_diskBus_url, function (data) { | ||||
|             $("#bus" + dev_idx).find('option').remove(); | ||||
|             $.each(data['bus'], function(i, item) { | ||||
|                 $("#bus" + dev_idx).append('<option value=' + item +'>' + item + '</option>'); | ||||
|             }); | ||||
|         }); | ||||
|     } | ||||
| </script> | ||||
| {% if request.user.is_superuser %} | ||||
|     <script> | ||||
|         function goto_compute() { | ||||
|             let compute = {{ compute.id }} | ||||
|             window.location.href = "{% url 'instances:create_instance_select_type' 1 %}".replace(1, compute); | ||||
|         } | ||||
|     </script> | ||||
| {% endif %} | ||||
| {% endblock %} | ||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue