mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-08 19:26:48 +00:00
561937b31a
The VM page's thirteen inline script blocks and its inline handlers move to static files: instance_page.js (tabs, OS details, clone names and MACs, Add disk dialog, boot order, host devices, migrate plan, console window, switches that send their form), instance_stats.js (charts and the Logs view) and instance_status.js (the reload when the VM's state changes). Their values and messages come as data attributes of the elements they belong to, page-wide ones on #vm-summary; a form marked data-please-wait shows the please-wait dialog. Three blocks that did nothing are dropped: popovers (the page has none), the video model preselection (the server selects it) and the delete form's poll stop (that form is on the destroy page). The HTML sink inventory now also reads the app's own scripts.
115 lines
7.7 KiB
HTML
115 lines
7.7 KiB
HTML
{% load i18n %}
|
|
{% load static %}
|
|
{% load bootstrap_icons %}
|
|
{% if request.user.is_superuser %}
|
|
<a href="#addvol" type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal">{% bs_icon 'plus' %} {% trans "Add disk" %}</a>
|
|
|
|
{# one form: a card per disk source, the fields of the chosen one (the others hidden and disabled, so not sent); the source chooses the form's action #}
|
|
<div class="modal fade" id="addvol" tabindex="-1" role="dialog" aria-labelledby="addInstanceVolumeLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-scrollable modal-fullscreen-sm-down">
|
|
<form class="modal-content" id="addvol-form" method="post" action="{% url 'instances:add_new_vol' instance.id %}"
|
|
data-new="{% url 'instances:add_new_vol' instance.id %}" data-existing="{% url 'instances:add_existing_vol' instance.id %}"
|
|
aria-label="{% trans "Add disk form" %}">{% csrf_token %}
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="addInstanceVolumeLabel">{% trans "Add disk" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans "Close" %}"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<fieldset class="mb-3">
|
|
<legend class="form-label fs-6">{% trans "Disk source" %}</legend>
|
|
<div class="row row-cols-1 row-cols-sm-2 g-2">
|
|
{% trans "New disk" as title %}{% trans "An empty disk of the size you set, made in a pool." as help %}
|
|
{% include "radio_card.html" with name="disk_source" value="new" chosen="new" %}
|
|
{% trans "Existing volume" as title %}{% trans "A volume already in a pool of the host." as help %}
|
|
{% include "radio_card.html" with name="disk_source" value="existing" chosen="new" %}
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset data-kinds="new">
|
|
<div class="row g-3">
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="addvol-storage">{% trans "Storage pool" %}</label>
|
|
<select id="addvol-storage" name="storage" class="form-select">
|
|
{% for storage in storages_host %}
|
|
<option value="{{ storage }}">{{ storage }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="addvol-name">{% trans "Name" %}</label>
|
|
<input id="addvol-name" type="text" class="form-control" name="name" required pattern="[a-zA-Z0-9\.\-_]+" aria-describedby="addvol-name-help">
|
|
<div class="form-text" id="addvol-name-help">{% trans "Letters, digits, dot, dash and underscore." %}</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="addvol-size">{% trans "Size" %}</label>
|
|
<div class="input-group">
|
|
<input id="addvol-size" type="text" class="form-control" name="size" value="10" maxlength="5" required pattern="[0-9]+" inputmode="numeric" aria-describedby="addvol-size-unit">
|
|
<span class="input-group-text" id="addvol-size-unit">GiB</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="addvol-format">{% trans "Format" %}</label>
|
|
<select id="addvol-format" name="format" class="form-select">
|
|
{% for format in instance.formats %}
|
|
<option value="{{ format }}"{% if format == default_format %} selected{% endif %}>{% trans format %}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="addvol-prealloc" name="meta_prealloc" value="true">
|
|
<label class="form-check-label" for="addvol-prealloc">{% trans "Preallocate metadata (qcow2)" %}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset data-kinds="existing">
|
|
<div class="row g-3">
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="selected_storage">{% trans "Storage pool" %}</label>
|
|
<select id="selected_storage" name="selected_storage" class="form-select" required
|
|
data-volumes-url="{% url 'volumes' instance.compute.id 'POOL' %}">
|
|
<option value="" selected disabled>{% trans "Choose a pool" %}</option>
|
|
{% for storage in storages_host %}
|
|
<option value="{{ storage }}">{{ storage }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="vols">{% trans "Volume" %}</label>
|
|
<select id="vols" name="vols" class="form-select" required>
|
|
<option value="" selected disabled>{% trans "Choose a pool first" %}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<div class="row g-3 mt-0">
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="addvol-bus">{% trans "Bus" %}</label>
|
|
<select id="addvol-bus" name="bus" class="form-select">
|
|
{% for bus in bus_host %}
|
|
<option value="{{ bus }}"{% if bus == default_bus %} selected{% endif %}>{% trans bus %}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="addvol-cache">{% trans "Cache mode" %}</label>
|
|
<select id="addvol-cache" name="cache" class="form-select">
|
|
{% for mode, name in instance.cache_modes %}
|
|
<option value="{{ mode }}"{% if mode == default_cache %} selected{% endif %}>{% trans name %}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
|
|
<button type="submit" class="btn btn-primary">{% trans "Add disk" %}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script src="{% static 'js/choice_dialog.js' %}"></script>
|
|
{% endif %}
|