mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-08 19:26:48 +00:00
dba41f97f3
When the server refused a VM create submission (a field error, a busy resource, a reused submission key, an existing VM name, a missing MAC for a new disk), the page came back on its first tab with the flavor dialog closed and every entered value gone: the hand-written fields showed fixed defaults, and the errors sat in a block at the top of the page, outside #messages and tied to no field. The view builds one NewVMForm per create form on the page (custom, template, one per flavor; create_forms), each with its own defaults; a hidden form_id, which is also the prefix of the form's field ids, names the submitted one, and it comes back bound. Every field renders from its own form and is marked by two small template tags (form_fields: error_attrs, field_error) when refused; a summary at the top of the form lists all of its errors, also those of fields it keeps hidden. The submitted tab or flavor dialog, marked data-form-id, reopens with any "Advanced" section that holds an error; a reopened dialog shows the messages too; the template form gets its pool, template and storage back. base.html's error focus is a function that walks the places an error can be, and a page can call it once it is set up, as the create page does. form_id changes nothing in how a POST is processed; one of an unknown form (a flavor deleted since) has its errors in the messages. The default video now applies to every create form. The custom form's disks and networks are not restored yet.
1078 lines
80 KiB
HTML
1078 lines
80 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
{% load operations %}
|
|
{% load django_bootstrap5 %}
|
|
{% load form_fields %}
|
|
{% block body_attrs %} data-error-focus="manual" data-submitted-form="{{ submitted_form }}"{% endblock %}
|
|
{% load bootstrap_icons %}
|
|
{% block title %}{% trans "Create new instance" %}{% endblock %}
|
|
|
|
{% block style %}
|
|
<link href="{% static "css/tom-select.bootstrap5.min.css" %}" rel="stylesheet">
|
|
<style>
|
|
/* the chosen images and networks are listed below the pickers, not in them */
|
|
#image-control + .ts-wrapper .ts-control > .item, #network-control + .ts-wrapper .ts-control > .item { display: none; }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block page_heading %}
|
|
{% blocktrans with host=compute.name %}New instance on {{ host }} {% endblocktrans %}
|
|
{% endblock page_heading %}
|
|
|
|
{% block content %}
|
|
{% include 'pleasewaitdialog.html' %}
|
|
|
|
|
|
<div class="row">
|
|
<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" role="presentation">
|
|
<button class="nav-link float-end" data-bs-toggle="tab" data-bs-target="#" type="button" role="tab" aria-controls="go_compute" title="{% trans "Back" %}" onclick="goto_compute()">
|
|
<span>{% bs_icon 'arrow-left'%} </span>
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#flavor" type="button" role="tab" aria-controls="flavor" aria-selected="true">
|
|
{% trans "Flavor" %}
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#addCustom" type="button" role="tab" aria-controls="addCustom" aria-selected="false">
|
|
{% trans "Custom" %}
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#add-from-temp" type="button" role="tab" aria-controls="add-from-temp" aria-selected="false">
|
|
{% trans "Template" %}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
<!-- Tab panes -->
|
|
<div class="tab-content">
|
|
<div role="tabpanel" class="tab-pane tab-pane-bordered active" id="flavor">
|
|
{% include 'create_flav_block.html' %}
|
|
<h3 class="page-header">{% trans "Create from flavor" %}</h3>
|
|
{% if not flavors %}
|
|
<div class="col-lg-12">
|
|
<div class="alert alert-warning shadow-sm">
|
|
{% bs_icon 'exclamation-triangle'%} <strong>{% trans "Warning" %}:</strong> {% trans "Hypervisor doesn't have any Flavors" %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<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, form_id, vm_form in flavor_forms %}
|
|
<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{{ flavor.id }}" data-form-id="{{ form_id }}" 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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form method="post" role="form" aria-label="Create instance from flavor form">{% csrf_token %}{% submission_key %}
|
|
<input type="hidden" name="form_id" value="{{ form_id }}">
|
|
<div class="modal-body">
|
|
{% if submitted_form == form_id %}<div class="modal-messages">{% bootstrap_messages %}</div>{% endif %}
|
|
{% include "instances/form_errors.html" with form=vm_form %}
|
|
<div class="row">
|
|
<label for="{{ form_id }}_name" class="col-sm-4 col-form-label">{% trans "Name" %}</label>
|
|
<div class="col-sm-7">
|
|
<input id="{{ form_id }}_name" type="text" class="form-control{{ vm_form.name|invalid }}" name="name" value="{{ vm_form.name.value|default_if_none:"" }}"
|
|
placeholder="{% trans "Name" %}" maxlength="64" required
|
|
pattern="[a-zA-Z0-9\.\-_]+"{% error_attrs vm_form.name form_id|add:"_name" %}>
|
|
{% field_error vm_form.name form_id|add:"_name" %}
|
|
<input type="hidden" name="vcpu" value="{{ vm_form.vcpu.value|default_if_none:"" }}">
|
|
<input type="hidden" name="memory" value="{{ vm_form.memory.value|default_if_none:"" }}">
|
|
<input type="hidden" name="hdd_size" value="{{ vm_form.hdd_size.value|default_if_none:"" }}">
|
|
</div>
|
|
</div>
|
|
{% if firmwares %}
|
|
<div class="row">
|
|
<label for="{{ form_id }}_firmware" class="col-sm-4 col-form-label">{% trans "Firmware" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="{{ form_id }}_firmware" class="form-select{{ vm_form.firmware|invalid }}" name="firmware"
|
|
{% error_attrs vm_form.firmware form_id|add:"_firmware" %}>
|
|
{% for frm in firmwares %}
|
|
<option value="{{ frm }}" {% if frm == vm_form.firmware.value %}selected{% endif %}>{{ frm }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error vm_form.firmware form_id|add:"_firmware" %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if dom_caps.cpu_modes %}
|
|
<div class="row">
|
|
<label for="{{ form_id }}_vcpu_mode" class="col-sm-4 col-form-label">{% trans "VCPU Config" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="{{ form_id }}_vcpu_mode" class="form-select{{ vm_form.vcpu_mode|invalid }}" name="vcpu_mode"
|
|
{% error_attrs vm_form.vcpu_mode form_id|add:"_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 }}" {% if model == vm_form.vcpu_mode.value %}selected{% endif %}> {% trans model %}</option>
|
|
{% endfor %}
|
|
</optgroup>
|
|
{% else %}
|
|
<option value="{{ mode }}" {% if mode == vm_form.vcpu_mode.value %}selected {% endif %}>
|
|
{% trans mode %}
|
|
</option>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error vm_form.vcpu_mode form_id|add:"_vcpu_mode" %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="row">
|
|
<label for="{{ form_id }}_storage" class="col-sm-4 col-form-label">{% trans "Storage" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="{{ form_id }}_storage" class="form-select{{ vm_form.storage|invalid }}" name="storage"
|
|
{% error_attrs vm_form.storage form_id|add:"_storage" %}>
|
|
{% if storages %}
|
|
{% for storage in storages %}
|
|
<option value="{{ storage }}" {% if storage == vm_form.storage.value %}selected{% endif %}>{{ storage }}</option>
|
|
{% endfor %}
|
|
{% else %}
|
|
<option value="">{% trans "None" %}</option>
|
|
{% endif %}
|
|
</select>
|
|
{% field_error vm_form.storage form_id|add:"_storage" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="{{ form_id }}_networks" class="col-sm-4 col-form-label">{% trans "Network" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="{{ form_id }}_networks" class="form-select{{ vm_form.networks|invalid }}" name="networks"
|
|
{% error_attrs vm_form.networks form_id|add:"_networks" %}>
|
|
{% for network in networks %}
|
|
<option value="{{ network }}" {% if network == vm_form.networks.value %}selected{% endif %}>{{ network }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error vm_form.networks form_id|add:"_networks" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label class="col-sm-4 col-form-label">{% trans "Advanced" %}</label>
|
|
<div class="d-grid col-sm-7">
|
|
<button class="btn btn-outline-light" type="button" title="{% trans "Advanced" %}" data-bs-toggle="collapse" data-bs-target="#flav-add-collapse-{{ flavor.id }}" aria-expanded="false" aria-controls="flav-add-collapse-{{ flavor.id }}">
|
|
<span>{% bs_icon 'caret-down'%} </span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="collapse" id="flav-add-collapse-{{ flavor.id }}">
|
|
<div class="row">
|
|
<label for="{{ form_id }}_mac" class="col-sm-4 col-form-label">{% trans "MAC" %}</label>
|
|
<div class="col-sm-7">
|
|
<input id="{{ form_id }}_mac" type="text" class="form-control{{ vm_form.mac|invalid }}" name="mac"
|
|
value="{{ vm_form.mac.value|default_if_none:"" }}" maxlength="17" required pattern="[a-zA-Z0-9:]+"
|
|
{% error_attrs vm_form.mac form_id|add:"_mac" %}>
|
|
{% field_error vm_form.mac form_id|add:"_mac" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="{{ form_id }}_nwfilter" class="col-sm-4 col-form-label">{% trans "NWFilter" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="{{ form_id }}_nwfilter" class="form-select{{ vm_form.nwfilter|invalid }}" name="nwfilter"
|
|
{% error_attrs vm_form.nwfilter form_id|add:"_nwfilter" %}>
|
|
<option value="">{% trans "None" %}</option>
|
|
{% for nwfilter in nwfilters %}
|
|
<option value="{{ nwfilter }}" {% if nwfilter == vm_form.nwfilter.value %}selected{% endif %}>{{ nwfilter }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error vm_form.nwfilter form_id|add:"_nwfilter" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="{{ form_id }}_net_model" class="col-sm-4 col-form-label">{% trans "NIC Type" %} </label>
|
|
<div class="col-sm-7">
|
|
<select id="{{ form_id }}_net_model" class="form-select{{ vm_form.net_model|invalid }}" name="net_model"
|
|
{% error_attrs vm_form.net_model form_id|add:"_net_model" %}>
|
|
{% for model in net_models_host %}
|
|
<option value="{{ model }}" {% if model == vm_form.net_model.value %} selected {% endif %}>{{ model }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error vm_form.net_model form_id|add:"_net_model" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="{{ form_id }}_cache_mode" class="col-sm-4 col-form-label">{% trans "HDD cache mode" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="{{ form_id }}_cache_mode" class="form-select{{ vm_form.cache_mode|invalid }}" name="cache_mode"
|
|
{% error_attrs vm_form.cache_mode form_id|add:"_cache_mode" %}>
|
|
{% for mode, name in cache_modes %}
|
|
<option value="{{ mode }}" {% if mode == vm_form.cache_mode.value %}selected {% endif %}>
|
|
{% trans name %}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error vm_form.cache_mode form_id|add:"_cache_mode" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="{{ form_id }}_video" class="col-sm-4 col-form-label">{% trans "Video" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="{{ form_id }}_video" class="form-select{{ vm_form.video|invalid }}" name="video"
|
|
{% error_attrs vm_form.video form_id|add:"_video" %}>
|
|
{% if not videos %}
|
|
<option value="vga">vga</option>
|
|
<option value="cirrus">cirrus</option>
|
|
{% endif %}
|
|
{% for video in videos %}
|
|
<option value="{{ video }}" {% if video == vm_form.video.value %}selected{% endif %}>{{ video }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error vm_form.video form_id|add:"_video" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="{{ form_id }}_listener_addr" class="col-sm-4 col-form-label">{% trans "Console Access" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="{{ form_id }}_listener_addr" class="form-select{{ vm_form.listener_addr|invalid }}" name="listener_addr"
|
|
{% error_attrs vm_form.listener_addr form_id|add:"_listener_addr" %}>
|
|
{% for addr, label in listener_addr %}
|
|
<option value="{{ addr }}" {% if addr == vm_form.listener_addr.value %} selected {% endif %}>{{ label }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error vm_form.listener_addr form_id|add:"_listener_addr" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="{{ form_id }}_add_cdrom" class="col-sm-4 col-form-label">{% trans "Add CD-Rom" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="{{ form_id }}_add_cdrom" class="form-select{{ vm_form.add_cdrom|invalid }}" name="add_cdrom"
|
|
{% error_attrs vm_form.add_cdrom form_id|add:"_add_cdrom" %}>
|
|
<option value="None" {% if vm_form.add_cdrom.value == "None" %}selected{% endif %}>--{% trans "False" %}--</option>
|
|
{% for bus in cdrom_buses %}
|
|
<option value="{{ bus }}" {% if bus == vm_form.add_cdrom.value %}selected {% endif %}>
|
|
{% trans bus %}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error vm_form.add_cdrom form_id|add:"_add_cdrom" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="{{ form_id }}_add_input" class="col-sm-4 col-form-label">{% trans "Add Input Device" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="{{ form_id }}_add_input" class="form-select{{ vm_form.add_input|invalid }}" name="add_input"
|
|
{% error_attrs vm_form.add_input form_id|add:"_add_input" %}>
|
|
<option value="None" {% if vm_form.add_input.value == "None" %}selected{% endif %}>--{% trans "False" %}--</option>
|
|
{% for bus in input_device_buses %}
|
|
<option value="{{ bus }}" {% if bus == vm_form.add_input.value %}selected{% endif %}>
|
|
{% trans bus %}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error vm_form.add_input form_id|add:"_add_input" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="{{ form_id }}_qemu_ga" class="col-sm-4 col-form-label">{% trans "Guest Agent" %}</label>
|
|
<div class="col-sm-7">
|
|
<input id="{{ form_id }}_qemu_ga" type="checkbox" name="qemu_ga" value="true"{% if vm_form.qemu_ga.value %} checked{% endif %}>
|
|
</div>
|
|
</div>
|
|
{% if virtio_support %}
|
|
<div class="row">
|
|
<label for="{{ form_id }}_virtio" class="col-sm-4 col-form-label">{% trans "VirtIO" %}</label>
|
|
<div class="col-sm-7">
|
|
<input id="{{ form_id }}_virtio" type="checkbox" name="virtio" value="{{ virtio_support }}"{% if vm_form.virtio.value %} checked{% endif %}>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" href="#addVMflavor{{ flavor.id }}" class="btn btn-sm btn-secondary" title="{% trans "Create Virtual Machine" %}">
|
|
<span >{% bs_icon '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" title="{% trans "Delete" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
|
|
{% bs_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" data-form-id="custom">
|
|
<div>
|
|
<form method="post" role="form" aria-label="Create custom instance form">{% csrf_token %}{% submission_key %}
|
|
<input type="hidden" name="form_id" value="custom">
|
|
{% include "instances/form_errors.html" with form=custom_form %}
|
|
<div class="row">
|
|
<label for="custom_name" class="col-sm-3 col-form-label">{% trans "Name" %}</label>
|
|
<div class="col-sm-7">
|
|
<input id="custom_name" type="text" class="form-control{{ custom_form.name|invalid }}" name="name"
|
|
value="{{ custom_form.name.value|default_if_none:"" }}" placeholder="{% trans "Name" %}" maxlength="64" required pattern="[a-zA-Z0-9\.\-_]+"
|
|
{% error_attrs custom_form.name "custom_name" %}>
|
|
{% field_error custom_form.name "custom_name" %}
|
|
</div>
|
|
</div>
|
|
{% if firmwares %}
|
|
<div class="row">
|
|
<label for="select_firmware" class="col-sm-3 col-form-label">{% trans "Firmware" %}</label>
|
|
<div class="col-sm-7">
|
|
<select class="form-select{{ custom_form.firmware|invalid }}" id="select_firmware" name="firmware"
|
|
{% error_attrs custom_form.firmware "select_firmware" %}>
|
|
{% for frm in firmwares %}
|
|
<option value="{{ frm }}" {% if frm == custom_form.firmware.value %}selected{% endif %}>{{ frm }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error custom_form.firmware "select_firmware" %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="row">
|
|
<label for="custom_vcpu" class="col-sm-3 col-form-label">{% trans "VCPU" %}</label>
|
|
<div class="col-sm-7">
|
|
<input id="custom_vcpu" type="text" class="form-control{{ custom_form.vcpu|invalid }}" name="vcpu"
|
|
value="{{ custom_form.vcpu.value|default_if_none:"" }}" maxlength="2" required pattern="[0-9]"
|
|
{% error_attrs custom_form.vcpu "custom_vcpu" %}>
|
|
{% field_error custom_form.vcpu "custom_vcpu" %}
|
|
</div>
|
|
</div>
|
|
{% if dom_caps.cpu_modes %}
|
|
<div class="row">
|
|
<label for="custom_vcpu_mode" class="col-sm-3 col-form-label">{% trans "VCPU Config" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="custom_vcpu_mode" class="form-select{{ custom_form.vcpu_mode|invalid }}" name="vcpu_mode"
|
|
{% error_attrs custom_form.vcpu_mode "custom_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 }}" {% if model == custom_form.vcpu_mode.value %}selected{% endif %}> {% trans model %}</option>
|
|
{% endfor %}
|
|
</optgroup>
|
|
{% else %}
|
|
<option value="{{ mode }}" {% if mode == custom_form.vcpu_mode.value %}selected {% endif %}>
|
|
{% trans mode %}
|
|
</option>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error custom_form.vcpu_mode "custom_vcpu_mode" %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="row">
|
|
<label for="custom_memory" class="col-sm-3 col-form-label">{% trans "RAM" %}</label>
|
|
<div class="col-sm-7">
|
|
<input id="custom_memory" type="text" class="form-control{{ custom_form.memory|invalid }}" name="memory"
|
|
value="{{ custom_form.memory.value|default_if_none:"" }}" maxlength="5" required pattern="[0-9]+"
|
|
{% error_attrs custom_form.memory "custom_memory" %}>
|
|
{% field_error custom_form.memory "custom_memory" %}
|
|
</div>
|
|
<label class="col-sm-1 col-form-label">{% trans "MB" %}</label>
|
|
</div>
|
|
<div id="disk_list_div" class="row d-none">
|
|
<label class="col-sm-3 col-form-label" id="added_disks">{% trans "Added Disks" %}</label>
|
|
<div class="col-sm-7">
|
|
<ul id="img-list" class="row">
|
|
<!-- populated from javascript -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="storage-control" class="col-sm-3 col-form-label">{% trans "HDD" %}</label>
|
|
<input id="images" name="images" type="hidden" value=""/>
|
|
<div class="col-sm-3">
|
|
<select class="form-select" id="storage-control" name="storage-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 class="form-select" id="image-control" name="image-control" multiple="multiple">
|
|
<!-- populated from javascript -->
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="network-control" 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=""/>
|
|
<input id="custom_mac" type="hidden" name="mac" value=""/>
|
|
<select class="form-select" id="network-control" name="network-control" multiple="multiple">
|
|
{% for network in networks %}
|
|
<option value="{{ network }}">{{ network }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label class="col-sm-3 col-form-label">{% trans "Advanced" %}</label>
|
|
<div class="d-grid col-sm-7">
|
|
<button class="btn btn-outline-light" type="button" title="{% trans "Advanced" %}" data-bs-toggle="collapse" data-bs-target="#custadvcollapse" aria-expanded="false" aria-controls="custadvcollapse">
|
|
<span>{% bs_icon 'caret-down'%} </span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="collapse" id="custadvcollapse">
|
|
<div class="row meta-prealloc">
|
|
<label for="custom_meta_prealloc" class="col-sm-3 col-form-label">{% trans "Disk Metadata" %}</label>
|
|
<div class="col-sm-7">
|
|
<input id="custom_meta_prealloc" type="checkbox" name="meta_prealloc" title="{% trans "Metadata preallocation" %}" value="true"{% if custom_form.meta_prealloc.value %} checked{% endif %}>
|
|
</div>
|
|
<label class="col-lg-1 col-form-label">{% trans "Image" %}</label>
|
|
</div>
|
|
<div class="row">
|
|
<label for="cache_mode" class="col-sm-3 col-form-label">{% trans "HDD Cache Mode" %}</label>
|
|
<div class="col-sm-7">
|
|
<select class="form-select{{ custom_form.cache_mode|invalid }}" id="cache_mode" name="cache_mode"
|
|
{% error_attrs custom_form.cache_mode "cache_mode" %}>
|
|
{% for mode, name in cache_modes %}
|
|
<option value="{{ mode }}" {% if mode == custom_form.cache_mode.value %}selected {% endif %}>
|
|
{% trans name %}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error custom_form.cache_mode "cache_mode" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="custom_nwfilter" class="col-sm-3 col-form-label">{% trans "NWFilter" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="custom_nwfilter" class="form-select{{ custom_form.nwfilter|invalid }}" name="nwfilter"
|
|
{% error_attrs custom_form.nwfilter "custom_nwfilter" %}>
|
|
<option value="">{% trans "None" %}</option>
|
|
{% for nwfilter in nwfilters %}
|
|
<option value="{{ nwfilter }}" {% if nwfilter == custom_form.nwfilter.value %}selected{% endif %}>{{ nwfilter }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error custom_form.nwfilter "custom_nwfilter" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="custom_net_model" class="col-sm-3 col-form-label">{% trans "NIC Type" %} </label>
|
|
<div class="col-sm-7">
|
|
<select id="custom_net_model" class="form-select{{ custom_form.net_model|invalid }}" name="net_model"
|
|
{% error_attrs custom_form.net_model "custom_net_model" %}>
|
|
{% for model in net_models_host %}
|
|
<option value="{{ model }}" {% if model == custom_form.net_model.value %} selected {% endif %}>{{ model }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error custom_form.net_model "custom_net_model" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="custom_video" class="col-sm-3 col-form-label">{% trans "Video" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="custom_video" class="form-select{{ custom_form.video|invalid }}" name="video"
|
|
{% error_attrs custom_form.video "custom_video" %}>
|
|
{% if not videos %}
|
|
<option value="vga">vga</option>
|
|
<option value="cirrus">cirrus</option>
|
|
{% endif %}
|
|
{% for video in videos %}
|
|
<option value="{{ video }}" {% if video == custom_form.video.value %}selected{% endif %}>{{ video }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error custom_form.video "custom_video" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="custom_listener_addr" class="col-sm-3 col-form-label">{% trans "Console Access" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="custom_listener_addr" class="form-select{{ custom_form.listener_addr|invalid }}" name="listener_addr"
|
|
{% error_attrs custom_form.listener_addr "custom_listener_addr" %}>
|
|
{% for addr, label in listener_addr %}
|
|
<option value="{{ addr }}" {% if addr == custom_form.listener_addr.value %} selected {% endif %}>{{ label }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error custom_form.listener_addr "custom_listener_addr" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="add_cdrom" class="col-sm-3 col-form-label">{% trans "Add CD-Rom" %}</label>
|
|
<div class="col-sm-7">
|
|
<select class="form-select{{ custom_form.add_cdrom|invalid }}" id="add_cdrom" name="add_cdrom"
|
|
{% error_attrs custom_form.add_cdrom "add_cdrom" %}>
|
|
<option value="None" {% if custom_form.add_cdrom.value == "None" %}selected{% endif %} >--{% trans "False" %}--</option>
|
|
{% for bus in cdrom_buses %}
|
|
<option value="{{ bus }}" {% if bus == custom_form.add_cdrom.value %}selected {% endif %}>
|
|
{% trans bus %}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error custom_form.add_cdrom "add_cdrom" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="add_input" class="col-sm-3 col-form-label">{% trans "Add Input Device" %}</label>
|
|
<div class="col-sm-7">
|
|
<select class="form-select{{ custom_form.add_input|invalid }}" id="add_input" name="add_input"
|
|
{% error_attrs custom_form.add_input "add_input" %}>
|
|
<option value="None" {% if custom_form.add_input.value == "None" %}selected{% endif %}>--{% trans "False" %}--</option>
|
|
{% for bus in input_device_buses %}
|
|
<option value="{{ bus }}" {% if bus == custom_form.add_input.value %}selected{% endif %}>
|
|
{% trans bus %}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error custom_form.add_input "add_input" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="custom_qemu_ga" class="col-sm-3 col-form-label">{% trans "Guest Agent" %}</label>
|
|
<div class="col-sm-6">
|
|
<input id="custom_qemu_ga" type="checkbox" name="qemu_ga" value="true"{% if custom_form.qemu_ga.value %} checked{% endif %}>
|
|
</div>
|
|
</div>
|
|
{% if virtio_support %}
|
|
<div class="row">
|
|
<label for="custom_virtio" class="col-sm-3 col-form-label">{% trans "VirtIO" %}</label>
|
|
<div class="col-sm-6">
|
|
<input id="custom_virtio" type="checkbox" name="virtio" value="{{ virtio_support }}"{% if custom_form.virtio.value %} checked{% endif %}>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="row">
|
|
<div class="d-grid col-sm-7 offset-3">
|
|
{% if storages %}
|
|
<button type="submit" class="btn btn-primary" name="create" formnovalidate value="1">
|
|
{% trans "Create" %}
|
|
</button>
|
|
{% else %}
|
|
<button class="btn 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="add-from-temp" data-form-id="template">
|
|
<div>
|
|
<form method="post" role="form" aria-label="Create instance from template form"
|
|
{% if submitted_form == "template" %}
|
|
data-template-pool="{{ request.POST.template_pool }}"
|
|
data-template="{{ template_form.template.value|default_if_none:"" }}"
|
|
data-storage="{{ template_form.storage.value|default_if_none:"" }}"
|
|
{% endif %}>{% csrf_token %}{% submission_key %}
|
|
<input type="hidden" name="form_id" value="template">
|
|
{% include "instances/form_errors.html" with form=template_form %}
|
|
<div class="row">
|
|
<label for="template_name" class="col-sm-3 col-form-label">{% trans "Name" %}</label>
|
|
<div class="col-sm-7">
|
|
<input id="template_name" type="text" class="form-control{{ template_form.name|invalid }}" name="name"
|
|
value="{{ template_form.name.value|default_if_none:"" }}" placeholder="{% trans "Name" %}" maxlength="64" required pattern="[a-zA-Z0-9\.\-_]+"
|
|
{% error_attrs template_form.name "template_name" %}>
|
|
{% field_error template_form.name "template_name" %}
|
|
</div>
|
|
</div>
|
|
{% if firmwares %}
|
|
<div class="row">
|
|
<label for="template_firmware" class="col-sm-3 col-form-label">{% trans "Firmware" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="template_firmware" class="form-select{{ template_form.firmware|invalid }}" name="firmware"
|
|
{% error_attrs template_form.firmware "template_firmware" %}>
|
|
{% for frm in firmwares %}
|
|
<option value="{{ frm }}" {% if frm == template_form.firmware.value %}selected{% endif %}>{{ frm }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error template_form.firmware "template_firmware" %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="row">
|
|
<label for="template_vcpu" class="col-sm-3 col-form-label">{% trans "VCPU" %}</label>
|
|
<div class="col-sm-7">
|
|
<input id="template_vcpu" type="text" class="form-control{{ template_form.vcpu|invalid }}" name="vcpu"
|
|
value="{{ template_form.vcpu.value|default_if_none:"" }}" maxlength="2" required pattern="[0-9]"
|
|
{% error_attrs template_form.vcpu "template_vcpu" %}>
|
|
{% field_error template_form.vcpu "template_vcpu" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="template_vcpu_mode" class="col-sm-3 col-form-label">{% trans "VCPU Config" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="template_vcpu_mode" class="form-select{{ template_form.vcpu_mode|invalid }}" name="vcpu_mode"
|
|
{% error_attrs template_form.vcpu_mode "template_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 }}" {% if model == template_form.vcpu_mode.value %}selected{% endif %}> {% trans model %}</option>
|
|
{% endfor %}
|
|
</optgroup>
|
|
{% else %}
|
|
<option value="{{ mode }}" {% if mode == template_form.vcpu_mode.value %}selected{% endif %}>
|
|
{% trans mode %}
|
|
</option>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error template_form.vcpu_mode "template_vcpu_mode" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="template_memory" class="col-sm-3 col-form-label">{% trans "RAM" %}</label>
|
|
<div class="col-sm-7">
|
|
<input id="template_memory" type="text" class="form-control{{ template_form.memory|invalid }}" name="memory"
|
|
value="{{ template_form.memory.value|default_if_none:"" }}" maxlength="5" required pattern="[0-9]+"
|
|
{% error_attrs template_form.memory "template_memory" %}>
|
|
{% field_error template_form.memory "template_memory" %}
|
|
</div>
|
|
<label class="col-sm-1 col-form-label">{% trans "MB" %}</label>
|
|
</div>
|
|
<div class="row">
|
|
<label for="template_disk" class="col-sm-3 col-form-label">{% trans "Template Disk" %}</label>
|
|
<div class="col-sm-3">
|
|
<select class="form-select" id="template_disk" name="template_pool" 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 class="form-select{{ template_form.template|invalid }}" id="template" name="template" disabled
|
|
{% error_attrs template_form.template "template" %}>
|
|
<!-- populated from javascript -->
|
|
</select>
|
|
{% field_error template_form.template "template" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="storage" class="col-sm-3 col-form-label">{% trans "Storage" %}</label>
|
|
<div class="col-sm-7">
|
|
<select class="form-select{{ template_form.storage|invalid }}" id="storage" name="storage" disabled
|
|
{% error_attrs template_form.storage "storage" %}>
|
|
{% if storages %}
|
|
{% for storage in storages %}
|
|
<option value="{{ storage }}" {% if storage == template_form.storage.value %}selected{% endif %}>{{ storage }}</option>
|
|
{% endfor %}
|
|
{% else %}
|
|
<option value="">{% trans "None" %}</option>
|
|
{% endif %}
|
|
</select>
|
|
{% field_error template_form.storage "storage" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="template_networks" class="col-sm-3 col-form-label">{% trans "Network/MAC" %}</label>
|
|
<div class="col-sm-3">
|
|
<select id="template_networks" class="form-select{{ template_form.networks|invalid }}" name="networks"
|
|
{% error_attrs template_form.networks "template_networks" %}>
|
|
{% for network in networks %}
|
|
<option value="{{ network }}" {% if network == template_form.networks.value %}selected{% endif %}>{{ network }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error template_form.networks "template_networks" %}
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<input id="template_mac" aria-label="{% trans "MAC" %}" type="text" class="form-control{{ template_form.mac|invalid }}" name="mac"
|
|
value="{{ template_form.mac.value|default_if_none:"" }}" maxlength="17" required pattern="[a-zA-Z0-9:]+"
|
|
{% error_attrs template_form.mac "template_mac" %}>
|
|
{% field_error template_form.mac "template_mac" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label class="col-sm-3 col-form-label">{% trans "Advanced" %}</label>
|
|
<div class="d-grid col-sm-7">
|
|
<button class="btn btn-outline-light" type="button" title="{% trans "Advanced" %}" data-bs-toggle="collapse" data-bs-target="#tempAdvCollapse" aria-expanded="false" aria-controls="tempAdvCollapse">
|
|
<span>{% bs_icon 'caret-down'%} </span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="collapse" id="tempAdvCollapse">
|
|
<div class="row meta-prealloc">
|
|
<label for="template_meta_prealloc" class="col-sm-3 col-form-label">{% trans "Disk Metadata" %}</label>
|
|
<div class="col-sm-7">
|
|
<input id="template_meta_prealloc" type="checkbox" name="meta_prealloc" title="{% trans "Metadata preallocation" %}" value="true"{% if template_form.meta_prealloc.value %} checked{% endif %}>
|
|
</div>
|
|
<label class="col-lg-1 col-form-label">{% trans "Image" %}</label>
|
|
</div>
|
|
<div class="row">
|
|
<label for="template_cache_mode" class="col-sm-3 col-form-label">{% trans "HDD cache mode" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="template_cache_mode" class="form-select{{ template_form.cache_mode|invalid }}" name="cache_mode"
|
|
{% error_attrs template_form.cache_mode "template_cache_mode" %}>
|
|
{% for mode, name in cache_modes %}
|
|
<option value="{{ mode }}" {% if mode == template_form.cache_mode.value %}selected{% endif %}>
|
|
{% trans name %}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error template_form.cache_mode "template_cache_mode" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="template_nwfilter" class="col-sm-3 col-form-label">{% trans "NWFilter" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="template_nwfilter" class="form-select{{ template_form.nwfilter|invalid }}" name="nwfilter"
|
|
{% error_attrs template_form.nwfilter "template_nwfilter" %}>
|
|
<option value="">{% trans "None" %}</option>
|
|
{% for nwfilter in nwfilters %}
|
|
<option value="{{ nwfilter }}" {% if nwfilter == template_form.nwfilter.value %}selected{% endif %}>{{ nwfilter }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error template_form.nwfilter "template_nwfilter" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="template_net_model" class="col-sm-3 col-form-label">{% trans "NIC Type" %} </label>
|
|
<div class="col-sm-7">
|
|
<select id="template_net_model" class="form-select{{ template_form.net_model|invalid }}" name="net_model"
|
|
{% error_attrs template_form.net_model "template_net_model" %}>
|
|
{% for model in net_models_host %}
|
|
<option value="{{ model }}" {% if model == template_form.net_model.value %} selected {% endif %}>{{ model }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error template_form.net_model "template_net_model" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="template_video" class="col-sm-3 col-form-label">{% trans "Video" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="template_video" class="form-select{{ template_form.video|invalid }}" name="video"
|
|
{% error_attrs template_form.video "template_video" %}>
|
|
{% if not videos %}
|
|
<option value="vga">vga</option>
|
|
<option value="cirrus">cirrus</option>
|
|
{% endif %}
|
|
{% for video in videos %}
|
|
<option value="{{ video }}" {% if video == template_form.video.value %}selected{% endif %}>{{ video }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error template_form.video "template_video" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="template_listener_addr" class="col-sm-3 col-form-label">{% trans "Console Access" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="template_listener_addr" class="form-select{{ template_form.listener_addr|invalid }}" name="listener_addr"
|
|
{% error_attrs template_form.listener_addr "template_listener_addr" %}>
|
|
{% for addr, label in listener_addr %}
|
|
<option value="{{ addr }}" {% if addr == template_form.listener_addr.value %} selected {% endif %}>{{ label }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error template_form.listener_addr "template_listener_addr" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="template_add_cdrom" class="col-sm-3 col-form-label">{% trans "Add CD-Rom" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="template_add_cdrom" class="form-select{{ template_form.add_cdrom|invalid }}" name="add_cdrom"
|
|
{% error_attrs template_form.add_cdrom "template_add_cdrom" %}>
|
|
<option value="None" {% if template_form.add_cdrom.value == "None" %}selected{% endif %}>--{% trans "False" %}--</option>
|
|
{% for bus in cdrom_buses %}
|
|
<option value="{{ bus }}" {% if bus == template_form.add_cdrom.value %}selected {% endif %}>
|
|
{% trans bus %}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error template_form.add_cdrom "template_add_cdrom" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="template_add_input" class="col-sm-3 col-form-label">{% trans "Add Input Device" %}</label>
|
|
<div class="col-sm-7">
|
|
<select id="template_add_input" class="form-select{{ template_form.add_input|invalid }}" name="add_input"
|
|
{% error_attrs template_form.add_input "template_add_input" %}>
|
|
<option value="None" {% if template_form.add_input.value == "None" %}selected{% endif %}>--{% trans "False" %}--</option>
|
|
{% for bus in input_device_buses %}
|
|
<option value="{{ bus }}" {% if bus == template_form.add_input.value %}selected{% endif %}>
|
|
{% trans bus %}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% field_error template_form.add_input "template_add_input" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label for="template_qemu_ga" class="col-sm-3 col-form-label">{% trans "Guest Agent" %}</label>
|
|
<div class="col-sm-6">
|
|
<input id="template_qemu_ga" type="checkbox" name="qemu_ga" value="true"{% if template_form.qemu_ga.value %} checked{% endif %}>
|
|
</div>
|
|
</div>
|
|
{% if virtio_support %}
|
|
<div class="row">
|
|
<label for="template_virtio" class="col-sm-3 col-form-label">{% trans "VirtIO" %}</label>
|
|
<div class="col-sm-6">
|
|
<input id="template_virtio" type="checkbox" name="virtio" value="{{ virtio_support }}"{% if template_form.virtio.value %} checked{% endif %}>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="row">
|
|
<div class="d-grid col-sm-7 offset-3">
|
|
{% if storages %}
|
|
<button type="submit" class="btn btn-primary" name="create" value="1" formnovalidate>
|
|
{% 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>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
{% block script %}
|
|
<script src="{% static 'js/tom-select.complete.min.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 () {
|
|
images_control = new TomSelect('#image-control', {
|
|
plugins: ['checkbox_options'],
|
|
placeholder: 'Add image...',
|
|
hidePlaceholder: false,
|
|
onItemAdd: function (value) { update_images(value, true); },
|
|
onItemRemove: function (value) { update_images(value, false); },
|
|
});
|
|
|
|
function update_images(value, checked) {
|
|
let input_value = toggleValue($('#images').val(), value, 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-end" onclick="images_control.removeItem(\'' + value + '\')"> X </a></li>';
|
|
selected_list_html += li;
|
|
counter++;
|
|
});
|
|
}else {
|
|
$('#disk_list_div').addClass('d-none');
|
|
}
|
|
$('#img-list').html(selected_list_html);
|
|
}
|
|
|
|
|
|
networks_control = new TomSelect('#network-control', {
|
|
plugins: ['checkbox_options'],
|
|
placeholder: 'Add network',
|
|
hidePlaceholder: false,
|
|
onItemAdd: function (value) { update_networks(value, true); },
|
|
onItemRemove: function (value) { update_networks(value, false); },
|
|
});
|
|
|
|
function update_networks(value, checked) {
|
|
let input_value = toggleValue($('#networks').val(), value, checked);
|
|
$('#networks').val(input_value);
|
|
let selected_list_html = '';
|
|
mac_array = [];
|
|
$('#custom_mac').val('');
|
|
net_counter = 0;
|
|
if (input_value != '') {
|
|
$.each(input_value.split(','), function (index, value) {
|
|
let li = '<li><input type="text" class="input-xs" name="mac'+ net_counter +'" maxlength="17" required pattern="[a-zA-Z0-9:]+" onchange="populate_mac(' + net_counter +')">' +
|
|
' eth' + net_counter +
|
|
' -> ' + value + ' ' +
|
|
'<a class="btn-link float-end" onclick="networks_control.removeItem(\'' + value + '\')"> X </a></li>';
|
|
random_mac(net_counter);
|
|
selected_list_html += li;
|
|
net_counter++;
|
|
});
|
|
|
|
}
|
|
$('#net-list').html(selected_list_html);
|
|
}
|
|
});
|
|
|
|
var images_control, networks_control;
|
|
|
|
var mac_array = [];
|
|
function random_mac(c) {
|
|
$.getJSON("{% url 'instances:random_mac_address' %}", function (data) {
|
|
mac_array[c] = data['mac'];
|
|
$('input[name="mac' + c + '"').val(data['mac']);
|
|
populate_mac(c);
|
|
});
|
|
}
|
|
|
|
function populate_mac(c){
|
|
mac_array[c] = $('input[name="mac' + c + '"').val();
|
|
// the custom form's MACs only: the other create forms have their own field
|
|
$('#custom_mac').val(mac_array.join(","));
|
|
}
|
|
|
|
function get_cust_vols(compute_id, pool) {
|
|
get_vol_url = "/computes/" + compute_id + "/storage/" + pool + "/volumes";
|
|
$.getJSON(get_vol_url, function (data) {
|
|
images_control.clearOptions();
|
|
$.each(data['vols'], function(i, item) {
|
|
images_control.addOption({value: item, text: item});
|
|
});
|
|
});
|
|
}
|
|
|
|
function get_template_vols(compute_id, pool) {
|
|
get_vol_url = "/computes/" + compute_id + "/storage/" + pool + "/volumes";
|
|
const loading = $.getJSON(get_vol_url, function (data) {
|
|
$("#template").find('option').remove();
|
|
$.each(data['vols'], function(i, item) {
|
|
$("#template").append($("<option>").val(item).text(item));
|
|
});
|
|
});
|
|
$("#template").removeAttr("disabled");
|
|
$("#storage").val(pool).change();
|
|
$("#storage").removeAttr("disabled");
|
|
return loading;
|
|
}
|
|
|
|
// A refused create form comes back open: its tab, or its flavor's dialog,
|
|
// marked data-form-id. Then the focus goes to its error, once the dialog
|
|
// is shown or the template form has its volumes back.
|
|
function reopen_submitted_form() {
|
|
const holder = document.querySelector(`[data-form-id="${document.body.dataset.submittedForm}"]`);
|
|
if (!holder) {
|
|
focusFirstError();
|
|
return;
|
|
}
|
|
open_sections_with_errors(holder);
|
|
if (holder.classList.contains("modal")) {
|
|
holder.addEventListener("shown.bs.modal", focusFirstError, {once: true});
|
|
bootstrap.Modal.getOrCreateInstance(holder).show();
|
|
} else {
|
|
bootstrap.Tab.getOrCreateInstance(document.querySelector(`[data-bs-target="#${holder.id}"]`)).show();
|
|
restore_template_volumes().then(focusFirstError);
|
|
}
|
|
}
|
|
|
|
// an "Advanced" section that holds a refused field
|
|
function open_sections_with_errors(holder) {
|
|
holder.querySelectorAll(".collapse").forEach(function (section) {
|
|
if (section.querySelector(".is-invalid")) {
|
|
bootstrap.Collapse.getOrCreateInstance(section, {toggle: false}).show();
|
|
}
|
|
});
|
|
}
|
|
|
|
// the template form's pool, template and storage, the template list
|
|
// loaded for the pool first, as when the user picks it
|
|
function restore_template_volumes() {
|
|
const form = document.querySelector("form[data-template-pool]");
|
|
if (!form || !form.dataset.templatePool) return $.when();
|
|
$("#template_disk").val(form.dataset.templatePool);
|
|
return get_template_vols({{ compute_id }}, form.dataset.templatePool).then(function () {
|
|
$("#template").val(form.dataset.template);
|
|
$("#storage").val(form.dataset.storage);
|
|
});
|
|
}
|
|
$(reopen_submitted_form);
|
|
|
|
function get_disk_bus_choices(compute_id, dev_idx, disk_type){
|
|
// the page's own architecture and machine type, from its URL
|
|
let arch = "{{ arch|escapejs }}";
|
|
let machine = "{{ machine|escapejs }}";
|
|
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>").val(item).text(item));
|
|
});
|
|
});
|
|
}
|
|
</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 %}
|